Echart常见效果实现方法的总结

此贴只写一部分常用属性，更多属性请看官网
1. 为Echart坐标轴加箭头

yAxis:{// 直角坐标系 grid 中的 y 轴
axisLine:{// 坐标轴轴线相关设置。
   show:true,
   symbol:['none', 'arrow']// 轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。
  }
}

2.为Echart的Y轴增加单位说明

 yAxis: {
   type: 'value'，// 坐标轴类型。 'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
   name:'(单位：)'// 坐标轴名称显示位置。
  }

示例：

 yAxis: {
        type: 'value',
        name:'(爱心值：点)',
        axisLine:{
            show:true,
            symbol:['none', 'arrow']
        }
    },

3. 为Echart折线图加拐点

series: [
   {
   label:{
      show:true,// 是否显示标签。
      position:[-20,-10],// 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置.也可为单值'top'/'left'/'inside'等
      formatter:'杀生丸' // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。字符串模板 模板变量有：

    {a}：系列名。
    {b}：数据名。
    {c}：数据值。
    {@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
    {@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
  label:图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 emphasis 状态。
折叠详情

示例：

 {
            name:'鬼灯',
            type:'line',
            stack: '鬼灯',
            data:[20, 182, 191, 234, 290, 330, 310],
            label:{
                  show:true,
                  position:[-20,-10],
                  formatter: '{b}: {@score}'
             }
        },
        {
            name:'夏目',
            type:'line',
            stack: '夏目',
            data:[150, 232, 601, 854, 990, 1030, 1210],
            label:{
                  show:true,
                  position:[-20,-10],
                  formatter: '{a}\n{@score}'
             }

        },

3. 为Echart图表加筛选

dataZoom:[// dataZoom 组件 用于区域缩放，从而能*关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
  {
    start: 0,// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
    end: 100,
    orient: null,// 布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。
可选值为：'horizontal'：水平。 'vertical'：竖直。
  }
]

示例：

  grid: {// 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
        left: '3%',
        right: '4%',
        bottom: '9%',// grid 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
        containLabel: true// grid 区域是否包含坐标轴的刻度标签。
    },
 dataZoom: [
        {
            show: true,
            realtime: true,
            start: 0,
            end: 100
        }
    ],

1. 为饼状图展示值增加计算出的百分比

series : [
    {
    label:{// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 emphasis 状态。
       show:true,
       formatter: '{b}: {c} ({d}%)'// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。

字符串模板

字符串模板 模板变量有：

    {a}：系列名。
    {b}：数据名。
    {c}：数据值。
    {d}：百分比。
    {@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
    {@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
      }
    }
 ]

示例：

option = {
    title : {
        text: '爱豆的集合',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series : [
        {
            name: '爱豆的集合',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:800, name:'夏目'},
                {value:600, name:'鬼灯'},
                {value:260, name:'云雀'},
                {value:200, name:'银时'},
                {value:1200, name:'杀生丸'}
            ],
            label:{
              show:true,
              formatter: '{b}: {c} ({d}%)'
            }

        }
    ]
};

4. 当Echart指示项过多时，可以按分页格式展示

legend: {// 图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        top:'3%',
        type: 'scroll'//图例的类型。可选值：'plain'：普通图例。缺省就是普通图例。
    'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。

        }

 legend: {
        top:'3%',
        type: 'scroll',
        data:['杀生丸','鬼灯','夏目','银时','云雀','杀生丸77777777','鬼灯77777777','夏目77777777','银时77777777','云雀77777777',],
    },