echarts中常用的一些方法（formatter）

1.自定义说明文字 lengend

image.png

 legend: {
            orient: 'vertical',
            right: "15%",   //所处位置
            top: "15%",
            color: ['#42bd7c', '#7fc6fa', '#1d84c7', '#20638e', '#297149', '#1ec6c6'], //设置颜色
            formatter: (params) => {  //格式化数据的函数
              console.log('我的参数',params)  //打印出来的数据（营业，网络，房屋，tgtn,g）
              for (let a = 0; a < this.pieXY.length; a++) {// this.pieXY  这个数据中有名称和次数
                if (this.pieXY[a].name == params) {   //两个名称进行对比，取出对应的次数
                  return params + '   ' + this.pieXY[a].value + '次'  //然后return你需要的legend格式即可
                }
              }
            }
          },

2.自定义鼠标悬浮框toolTip

image.png

 tooltip: {  //悬浮框
          trigger: "axis",          
          backgroundColor: '#fff',  //背景色
          padding: [5, 15, 5, 15],   //边距
          borderColor: '#DDDDDF',  //边框颜色
          borderWidth: 1,    //边框线宽度
          textStyle: {     //文字样式
            color: '#6A6A6A',
            decoration: 'none',
            fontFamily: 'Verdana, sans-serif',
          },
          extraCssText:'text-align: left;',  //文字对齐方式
          formatter: function (params) {   //格式化函数
            return '现付：'+params[0].data.key+'</br>'+'月结：'+params[0].data.name
          },
        },

需要注意的是，这个的数据需要我们自己设置,可以自定义加入key,name,label等等，到时候取出来

        let  formList  = [{
            key:213,
            name:213,
            value:416
          }]

           ``在series中使用我们改装后的数据``
          series: [{
            showAllSymbol: true,
            formatter: '{data}元',
            type: "line",
            name: '金额',
            data: formList ,  //使用我们改装过的数据，折线图取value值
            color: ["#3ccacb"],
            title: {
              subtext: "单位 : 元",
              padding: [10, 50, 60, 60]
            },
            label: {
              normal: {
                position: 'inner'
              }
          }]

3.自定义饼状图的label

饼状图默认有如下提示

image.png

如果不想要这个提示文字，需要像如下设置

  series: [{
          type: "pie",
          radius: ["40%", "68%"],
          center: ["45%", "60%"],
          data: this.pieXY,
          label: {
             normal: {
             show: false,  //设置show为false即可
             position: 'center'
          },
         }
       }]

如果需要自定义label里面的文字，请看如下设置

 series: [{
           type: "pie",
           radius: ["40%", "70%"],
           avoidLabelOverlap: false,
           center: ["40%", "60%"],
           data: this.pieXY,
           label: {
              normal: {
              show: true,
              formatter: function (params) {
                  return params.name + " " + +params.value + " 次"
               }
              }
            },
         }]

image.png

4.Y轴数字放不下，修改Y轴数字所占位置大小

Y轴数字未太大，未完全展示出来

image.png

修改属性后

image.png

 grid: {
          left: 55
        },

vue中如何使用echarts：https://www.jianshu.com/p/df87d92fd847