【Echarts】bar/line/pie-chart实操的一些笔记，特别注意图例的自定义！

小白，看开发文档也不知道具体怎么操作，还得感谢各位IT大佬指点！

BarChart - 需求是一个基础柱状图

1. 设置bar的边角圆润 - 在series中添加itemStyle

series: [{
          name: 'amount',
          type: 'bar',
          barWidth: '60%',
          data: data, // 传入自己的数据即可
          color: '#63B8FF',
          itemStyle: {
            barBorderRadius: 5, // 设置边角圆润程度
            borderWidth: 1, // 设置边宽
            borderType: 'solid', // 设置线为直线 dashed为虚线
          },
        }],

2. 设置数值在bar的上方 - 在setOption下设置label

this.chart.setOption({
    label: {
          show: true, // 是否显示
          position: 'top', // 显示位置 默认显示在中间 可自定义bottom啥的
          color: 'black', // 设置数据颜色
        }
})

3. 上一下自己的图 

LineChart - 需求是不带坐标轴平滑图 类似于山脉图

1. 设置line之下的区域颜色（更加美观啦~） - 在series中设置areaStyle

series: [{
            name: name,// 根据需求可动态传入名字
            data: data,// 传入数据
            type: 'line',
            smooth: true, // 曲线是光滑滴
            areaStyle: { // 就是这啦~
              color: color2, // 设置颜色（建议比直线的颜色浅一些哈哈）
              opacity: 0.5, // 设置透明度
            },
          }]

2. 上一下自己的图 

 PieChart - 需求是一个圆环图

1. 设置圆环图的中间文字和样式 即 title

title: {
          text: "总人天",
          subtext: "123,224.5",
          // 主标题样式
          textStyle: {
            fontSize: 12,
            color: "rgba(0,0,0,0.65)",
            fontWeight: 400
          },
          // 副标题样式
          subtextStyle: {
            fontSize: 20,
            color: "#000000",
            fontWeight: 500
          },
          textAlign: "center", //文字居中显示
          x: "29%",   //距离圆环左边的距离
          y: "40%"    //距离圆环上边的距离
},

2. 自定义图例 legend

（这个就很牛了，感谢大佬的分享！指路如下：）echarts图表自定义图例_July++的博客-CSDN博客_echarts自定义图例在echarts中自定义图例样式 就跟表格一样清晰的展示数据<!-- 图表容器 --><div id="myChart1" ref="myChart1" :style="{ width: '100%'}"></div>//在获取到图表数据后再调用此方法进行图表渲染 drawLine() { let myChart = ""; let option = { title: { text: "0.00".https://blog.csdn.net/weixin_41056945/article/details/121380840

先贴legend中的基础设置： 

legend: {
          orient: 'vertical',// 设置图例为纵向
          align: 'left', // 设置图例的标识在左边
          x: 'right', // 设置图例的位置居右
          y: 'center', // 设置图例位置纵向居中
          left: '60%', // 设置图例从左到右位于60%处
          icon: 'circle', // 设置图例标识为原型，默认为矩形
          itemHeight: 9, // 设置图例高度
          itemWidth: 9, // 设置图例宽度
          itemGap: 25, // 设置图例间距
          data: data, // 传入自己的数据
          // 自定义图例格式 ！！！
          formatter: (name) => {
            return this.getFormatter(name);
          },
          // 我的实际需求用这样的表格实现更便捷，下面就是设置每列的样式啦
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                color: 'black',
              },
              b: {
                fontSize: 12,
                color: '#BEBEBE',
                width: 80,
              },
              c: {
                fontSize: 12,
                color: 'black',
                fontWeight: 'bold',
              }
            }
          }
        },

再贴自己的自定义图例格式：

// 第一列为： 名称；第二列为：|百分比；第三列为：数据
getFormatter(name) {
      let arr = [];
      let num = 0;
      let percent = '';
      for (const item of this.data) {
        if (item.name === name) {
          num = item.value;
          percent = ((item.value / this.sumValue) * 100).toFixed(0) + '%';
        }
      }
      arr = [
       "{a|" + name + "}",
       "{b|" + " | " + percent + "}",
       "{c|" + num + "}",
      ];
      return arr.join("");
    }

3. 由于图像默认居中显示，加上图例会重叠，故需要对图像位置进行设置

series: [{
            type: 'pie',
            radius: ['50%', '70%'], // 设置半径
            center: ['30%', '50%'], // 我设置的位置居左
}]

4. 设置圆环图各块分离，即设置边框样式

series: [{
        itemStyle: {
              borderRadius: 10,
              borderColor: 'white',
              borderWidth: 5
        },
}]

5. 上一下自己的图

好啦，目前就这样，大家有什么建议或者心得也可以分享一下，祝越来越好！