echarts常用配置（持续更新）

有时候拿到的设计图与echarts示例得样式不太像，这时候需要修改配置，达到高还原设计图。记录一些工作中常用的配置

1. 柱状图

echarts官方示例的柱状图直接copy用来会发现很丑，很突兀融入不到我们的页面中，经常需要改的配置有坐标轴线、刻度线、背景颜色…
① y轴轴线分割段数（yAxis. splitNumber）轴线（splitLine）刻度线（axisTick）
如图：配置前后对比图

代码片段：

yAxis:{
         type:'value',
         splitNumber:2
       }

 yAxis: {
          type: "value",
          splitNumber: 3,
          axisLine: {
            lineStyle: { color: "#B7CFFC" },
          },
          splitLine: {
            lineStyle: {
              color: "#00C0FF",
            //   width: 1,
            },
            show: true,
          },
        },

② 柱体颜色(series.itemStyle)、宽度(series.barWidth)自定义

series: [
          {
             data: ydata,
             type: 'bar'
             barWidth:'16px',
             itemStyle:{
                   color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{//代表渐变色从正上方开始
                   offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                   color: 'rgba(136, 232, 184, 1)'
                   }, //柱图渐变色
                  {
                   offset: 1, //指100%处的颜色
                   color: 'rgba(27, 133, 167, 1)'
               }])
            }
         ]

③ x轴线（xAxis.axisLine）、刻度线（xAxis.axisTick）设置

xAxis:[
         {
             type: 'category',
             data:xdata,
             axisTick: {
               show: false
             },
             axisLine:{
               lineStyle:{
                  color:'#174c7b'
               }
             }
        }]

2. 饼图

echarts官方示例饼图的样式还算比较悦目，无奈我们的ui总有些新奇的想法。经常会改动的配置有文本标签的数据展示、引导线的样式等等
① 饼图填充色（color）
官方默认颜色为['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] 循环取色，可自定义颜色，改写配置color，如：color:['rgb(128, 128, 128)', 'rgb(105, 18, 12)', 'rgb(18, 18, 108)']
② 文本标签（series.label）
其中字符串模板变量：
{a}：系列名。
{b}：数据名。
{c}：数据值。
{d}：百分比。

 label:{
          show:true,
          formatter:'{a|{c} {d}% }\n\r {b|{b}}',
          lineHeight:20,
          rich: {
               b:{
                   color:'auto',
                   // padding:[0,-20,0,0]
                  },
                a:{
                    color:'#fff',
                    // padding:[0,-20,0,0]
                   }
                  },
         }

点击查看rich详情
③引导线（series.labelLine）

 labelLine:{
              length:20, //短线
              length2:30,//长线
              minTurnAngle:90 //夹角
           }

3.折线图

① 自定义拐点的显示（只需要特定的值才显示拐点）
利用symbol函数实现，如：只在除得尽5的x数值上显示

 series: [
          {
            data: yData,
            type: "line",
            smooth: true,
            symbolSize:10,
            symbol: function(value,params) {
                // console.log(value,params)
                if(params.dataIndex %5 == 0 ) {
                    return 'circle';
                } else {
                    return 'none'
                }
            },
            lineStyle: {
              color: "#2bf9d6",
              width: 3,
            },
            itemStyle: {
              color: "yellow"
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#007F96",
                },
                {
                  offset: 1,
                  color: "#449394",
                },
              ]),
            },
          },
        ],

效果图：
②x轴数值的显示
interval属性，0：强制显示全部 ，1：隔一个值显示，2：隔两个值显示 …以此类推

xAxis: {
          type: "category",
          data: xData,
          axisLabel:{
            interval: 4
          }
        },

4.实时更新echarts图表，无数据时显示暂无数据

myChart = this.$echarts.init(this.$refs.chart);
myChart.setOption(option)
  if (!data.length) {
    myChart.showLoading({
      text: '暂无数据',
      showSpinner: false,
      textColor: 'black',
      maskColor: 'rgba(255, 255, 255, 1)',
      fontSize: '26px',
      fontWeight: 'bold'
    })
  } else {
  	myChart.hideLoading()
  }

5.提示框超出图标区域被截断

解决：tooltip.confine = true

6.双x双y轴实现的关键配置

在series中配置对应的xAxisIndex、yAxisIndex

关键代码附上：

xAxis: [
    {
      type: 'category',
      data: ['2016-1', '2016-2', '2016-3', '2016-4'],
    },
    {
      type: 'category',
      data: [ '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12'],
    }
  ],
 yAxis: [
    {
      type: 'value',
    },
    {
      type: 'value',
    }
  ],
 series: [
    {
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      type: 'line',
      data: [
        3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
      ]
    }
  ]

7.双y轴保持轴线对齐

思路：设置两条y轴数据的最大最小值，再将其分成同等份
关键代码附上

yAxis: [
          {
            type: "value",
            name: '个',
            min: 0,
            max: set_max(Math.max.apply(null, ynumData)),
            interval: set_max(Math.max.apply(null, ynumData)) / 5,
            // axisLabel: {
            //   formatter: '{value} 个'
            // }
          },
          {
            type: "value",
            name: '万m²',
            min: 0,
            max: set_max(Math.max.apply(null, yareaData)),
            interval: set_max(Math.max.apply(null, yareaData)) / 5,
            // axisLabel: {
            //   formatter: '{value} 万m²'
            // }
          },
       ],```
    function set_max(num) {
        // 1.判断是否小数：  //判断是否含有小数点：要检索的字符串值没有出现，则该方法返回 -1。
        if (num.toString().indexOf(".") != -1) {
          //有小数点
          num = Math.ceil(num); //向上取整
        }
        // 2.向上取整数倍
        if (num.toString().length < 2) {
          // 一位数1
          num = 10;
        } else if (num.toString().length < 3) {
          // 2位数
          num = Math.ceil(num / 5) * 5; // 变成最近的5的倍数
        } else {
          // 位数--先判断是不是1000...的倍数
          var t = "";
          for (let i = 0; i < num.toString().length - 1; i++) {
            t += "0"; //'0000...'
          }
          if (num % Number(1 + t) != 0) {
            //不是100的倍数

            num = (Number(num.toString().substr(0, 1)) + 1) * Number(1 + t);
          }
        }
        return num;
      }