echarts笔记

一、给legend图例限制长度

1.1 通过给其加 formatter: function (value) { }

legend: {
    type: 'scroll',
    orient: 'vertical',
    icon: "circle",
    right: 5,
    top: 15,
    bottom: 20,
    formatter: function (value) {
      if (value.length > 12) {
          value = value.substring(0, 12) + "....";
      }
      return value;
    },
    data: []
  },

1.2、更改图例\x轴\y轴字体颜色  图例下面加 textStyle,x轴和y轴下加lineStyle

legend: {
    top: 'bottom',
    icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
    itemGap: 7, // 设置间距
    padding: [0, 0, 15, 0], //图例距离
    textStyle: {
       color: '#333'
    }
  },

xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
         color: '#333'
      }
    }
  },
yAxis: {
   axisLine: {
      lineStyle: {
         color: '#333'
      }
   }
},

1.2、给折线图的端点设置颜色，让数显示在顶部，添加渐变色

series: [
    {
      name: '发放金额',
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 2,
        color: '#91cc75'
      },
      //设置端点颜色
      itemStyle: {
        normal: {
          color: '#91cc75'
        }
      },
      // showSymbol: false,
      // 添加渐变色
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(145, 204, 117,0.8)'
          },
          {
            offset: 1,
            color: 'rgba(145, 204, 117,0.1)'
          }
        ])
      },
      // 让数量显示在顶部
      label: {
        normal: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#eee'
          }
        }
      },
      data: []
    }
  ]