关于Echarts

一.Echarts的使用

1.安装：npm install echarts@4.8.0 --save

我下载的是4.8.0版本的，我这个项目安装最新版本会报错

2.main.js中引入

• import echarts from "echarts";
• app.config.globalProperties.echarts = echarts;    //设置为全局的，因为我这个项目用到了vue3

3.可以使用了

二.饼图的常用配置

这个是我项目中用到的饼图

async getList() {
        let that = this;
        const res = await that.ajax.Weight.GetList("GetSalesMaterialInfo", that.params) //请求数据
        if (res.data.errCode == 0) {
          let sum = 0 //物料品种总量的计算
          for (var i = 0; i < res.data.result.yData.length; i++) {
            sum = sum + res.data.result.yData[i];
          }
          var chartDom = document.getElementById('main');
          var myChart = echarts.init(chartDom);
          window.onResize = function() {
            chartDom && myChart.resize()
          }
          var option;
          option = {
            //饼图颜色
            color: ['#3673E8', '#C436E8', '#61B8FF', '#00D7ED', '#3633D7', '#A2E34F', '#F5B763',
              '#FD9588', '#96C3D8', '#C8E8FF'
            ],
           //图例
            legend: {
              orient: 'vertical',  //图例的排列，可以竖着排列(vertical)，也可以横着排列(horizontal)
              left: '48%', //图例距离echarts容器左侧的距离，支持百分比、具体像素值
              top: 20, //图例距离echarts容器上侧的距离
               //处理图例的formatter函数

              formatter: function(name) {
                var index = 0;
                var clientlabels = res.data.result.xData;
                var clientcounts = res.data.result.yData;
                clientlabels.forEach(function(value, i) {
                  if (value == name) {
                    index = i;
                  }
                });
                  //判断图例的文字长度
                if(name.length>6){  //如果文字长度大于6，多余部分显示省略号 + 相对应的数据
                  return `${name.slice(0, 6)}...` + "   " + clientcounts[index];
                }else{    //如果文字长度不大于6正常显示 + 相对应的数据
                  return name + "   " + clientcounts[index];
                }
              }
            },
          //原生图形的元素组件
            graphic: [{
              type: "text", //元素组件类型，支持多种，具体自行去官网查看吧！
              left: "12%",  //元素组件距离echarts容器左侧的距离，可支持具体像素值
              top: "33%",  //元素组件距离echarts容器上侧的距离，可支持具体像素值
              style: {
                text: "物料品种总量",
                textAlign: "center",  //水平对齐方式
                fill: "#333333", //填充颜色，可以理解为文本颜色(其实就是改变了文本颜色)
                fontSize: 14 //字号
              },
            }, {
              type: "text",
              left: "14.5%",
              top: "42%",
              style: {
                text: sum.toFixed(2), // sum:我在上面计算过了(自己扒拉一下上面的代码，好吧！)；toFixed（2）：两位小数
                textAlign: "center",
                fill: "#4882F6",
                fontSize: 18,
                fontWeight: 700 //字重，可以理解为字体的粗细
              }
            }],
          //必须具备的配置
            series: [{
              type: 'pie', //echarts图形类型
              top: '80px', //饼图距离echarts容器上侧的距离
              center: ['22.5%', '15%'], //调整饼图在echarts容器中的位置，相当于X轴Y轴。饼图使用grid调整位置不生效。
              radius: ['55%', '85%'], //饼图的内半径，外半径
              avoidLabelOverlap: false, //是否放置标签重叠，默认是true
              data: res.data.result.pie //后端请求的数据
            }]
          };
          option && myChart.setOption(option);
        }
      },

 前端小白，如内容有问题，请大佬们指出，谢谢