Echarts 教程三

经验总结

折线图设置网格线

    //x轴，y轴都写上这个即可
    splitLine:{
      show:true,
      lineStyle:{
        type:"dashed",
        color:"red"
      }
    },
1
2
3
4
5
6
7
8

当然可以去掉网格线

在图表x/y轴添加描述文字

饼图中间添加描述

echarts中y轴坐标不为小数

 yAxis: {
   minInterval: 1,
 },
1
2
3

自定义tooltip 样式

      tooltip: {
          show: true,
          // 自定义tooltip样式，直接在formmater中写就行
          formatter: (params) => {
              return '
'  + params.name + ' 
 ' + '案件数:  ' + params.value + '
';
          }
      },
1
2
3
4
5
6
7

new echarts.graphic.LinearGradient 使用内置渐变器

      //填充样式区域
       areaStyle:{
            opacity:0.8,//透明度
            // 使用echarts内置的渐变色生成器   offset的范围是0 ~ 1, 用于表示位置
            color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(128,255,165)'},{offset:1,color:'rgba(1,191,236)'}])      
       },
1
2
3
4
5
6

图例过多的时候，显示分页

legend: {
     orient: 'horizontal',
     bottom: 'bottom',
     type: 'scroll'
 },

1
2
3
4
5
6

横向柱状图显示数字

label: {
  // 柱图头部显示值
  show: true,
  position: "right",
  color: "#999",
  fontSize: "12px",
  formatter: (params) => {
    return params.value;
  },
},

1
2
3
4
5
6
7
8
9
10
11

使用formatter让X轴文字竖直显示，且显示过多时双列显示

axisLabel: {
  interval: 0,
  formatter(value){
      var ret = "";//拼接加\n返回的类目项
      var maxLength = 2;//每项显示文字个数
      var valLength = value.length;//X轴类目项的文字个数
      var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
      if (rowN > 1)//如果类目项的文字大于3,
      {
          for (var i = 0; i < rowN; i++) {
              var temp = "";//每次截取的字符串
              var start = i * maxLength;//开始截取的位置
              var end = start + maxLength;//结束截取的位置
              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
              temp = value.substring(start, end) + "\n";
              ret += temp; //凭借最终的字符串
          }
          return ret;
      }
      else {
          return value;
      }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25