vue中使用echarts记录属性2

环境：vue2 + element-ui

echarts版本：5.4.0

安装：

npm install echarts --save

需要的页面引用：

import * as echarts from 'echarts';

针对于饼状图与环形图：

<div id="mainRightPiess" :style="{ width: '100%', height: '280px' }"></div>

环形图效果图如下：

点击右侧的条目，饼图中间的图标和数量发生改变，中间的圆环和数量是通过echarts设置，图标是通过定位属性设置

 代码如下

<script>
import * as echarts from "echarts";
export default {
  props: {
    greenGoodProp: {
      type: Object,
      default() {
        return {};
      },
    },
    picName: {
      type: String,
      default: "picNames1",
    },
  },
  data() {
    return {
      url: "../../../assets/images/auit/shucai.png", // 进入页面默认图标
      workType: {  // 数据源
        useType1: 0,
        useType2: 0,
        useType3: 0,
        useType4: 0,
        useType5: 0,
        useType6: 0,
      },
    };
  },
  watch: {
// 侦听父组件传过来的数据源，用workType接收
    greenGoodProp: {
      handler(val) {
        if (val) {
          this.workType = val;
          this.value = this.workType.useType1;
        }
        this.getEcharts();
      },
      deep: true,
    },
// 侦听选中右边的每一项变化，拿到值后渲染到页面
    picName(val) {
      if (val == "picNames1") {
        this.value = this.workType.useType1;
      }
      if (val == "picNames2") {
        this.value = this.workType.useType2;
      }
      if (val == "picNames3") {
        this.value = this.workType.useType3;
      }
      if (val == "picNames4") {
        this.value = this.workType.useType4;
      }
      if (val == "picNames5") {
        this.value = this.workType.useType5;
      }
      if (val == "picName61") {
        this.value = this.workType.useType6;
      }
      this.getEcharts();
    },
  },
  mounted() {},
  methods: {
    getEcharts() {
      var myChart = echarts.init(document.getElementById("mainRightPiess"));
      myChart.setOption({
        title: { // 环形图中间的数据
          text: (Number(this.value) / 10000).toFixed(2) + "万辆",
          left: "center",
          top: "67%",
          textStyle: {
            textAlign: "center",
            fill: "#FFA951",
            fontSize: 20,
            fontWeight: 400,
            color: "#fff",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              style: { // 环形图中间的白色圆环
                image: require("../../../assets/images/auit/auditjuxing.png"), 
                width: 150,
                height: 150,
              },
              left: "60",
              top: "94",
            },
            {
              type: "text",
              left: "center", // 相对父元素居中
              top: "150", // 相对父元素上下的位置
              style: {
                // fill: "#333333",
                // text: ["总人数"],
                font: "12px Arial Normal",
              },
            },
          ],
        },
        grid: {
          left: "5%", // 与容器左侧的距离
          right: "5%", // 与容器右侧的距离
          top: 100, // 与容器顶部的距离
          //bottom: '5%', // 与容器底部的距离
        },

        tooltip: {
          trigger: "item",
          confine:true,
        },
        series: [
          {
            name: "货物分布",
            type: "pie",
            // top: '10%',
            radius: ["60%", "70%"],
            center: ["49%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            itemStyle: {
              normal: {
                color: (list) => {
                  // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                  var colorList = [
                    {
                      colorStart: "#061535", //蔬菜
                      colorEnd: "#3DB7CE",
                    },
                    {
                      colorStart: " #061534", // 水果
                      colorEnd: "#FF8F8F",
                    },
                    {
                      colorStart: " #061534", // 水产
                      colorEnd: "#00A8FF",
                    },
                    {
                      colorStart: "#030C21", //肉蛋奶
                      colorEnd: "#326CF1",
                    },
                    {
                      colorStart: " #061534", //禽畜
                      colorEnd: "#9835FD",
                    },

                    {
                      colorStart: "#061434", // 其他
                      colorEnd: "#FFCE57",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    {
                      //左、下、右、上
                      offset: 0.1,
                      color: colorList[list.dataIndex]["colorStart"],
                    },
                    {
                      offset: 0.8,
                      color: colorList[list.dataIndex]["colorEnd"],
                    },
                  ]);
                },
                borderRadius: 10,
                // borderColor: '#fff',
                borderWidth: 2,
              },
            },
            data: [
              { value: this.workType.useType1, name: "蔬菜" },
              { value: this.workType.useType2, name: "水果" },
              { value: this.workType.useType3, name: "水产" },
              { value: this.workType.useType4, name: "肉蛋奶" },
              { value: this.workType.useType5, name: "禽畜" },
              { value: this.workType.useType6, name: "其他" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
// 自适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

对于饼图，echarts案例已经能够满足需要了

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

下一篇整理，3D柱状图

工作记录，有不足之处还请见谅，还望指出，感谢！