在vue2项目中使用echarts以及echarts的各种配置

使用

1. 安装

npm install echarts --save或者yarn add echarts --save

2. 在main.js中引入

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

在项目中使用

前言：echart图标必须放在有宽高的盒子中，使用前要先获取到dom实例，最好是一个图一个组件

<template>
  <div class="warning" ref="warn"></div>
</template>
<style>
.warning {
  height: 100%;
  width: 100%;
}
</style>
<script>
export default {
  data() {
    return {};
  },
  props: {
    List: [],
  },
  mounted() {
    var timer = 0
    this.echartsset = setInterval(() => {
      timer++
      this.getEchartData();
      if(timer === 8){
        clearInterval(this.echartsset)
      }
    }, 1000);
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.warn;
      var color = [
        "rgb(114, 178, 255)",
        "rgb(139, 102, 206)",
        "rgb(40, 136, 225)",
        "rgb(6, 219, 219)",
      ];
      var warnlist = this.List;
      // console.log(warnlist);
      let legendname = warnlist.map((item) => {
        return item.name;
      });
      // console.log(legendname);
      var legend = legendname;

      var seriesData = warnlist;

      if (chart) {
        const myChart = this.$echarts.init(chart);
        let option = {
          backgroundColor: "rgba(0,0,0,0)",
          // color: color,
          title: {
            text: "问题预警",
            x: "20%", // 问题预警的位置
            y: "center",
            textStyle: {
              fontSize: 20,
              color: "white",
            },
          },
          tooltip: {
            trigger: "item",
          },
          grid: {
            top: "15%",
            left: 0,
            right: "1%",
            bottom: 5,
            containLabel: true,
          },
          legend: {
            orient: "vertical",
            top: "center",
            right: "10%", // 提示的位置
            icon: "circle",
            textStyle: {
              align: "left",
              verticalAlign: "middle",
              rich: {
                name: {
                  color: "rgba(255,255,255)",
                  fontSize: 14,
                },
                value: {
                  color: "rgba(255,255,255)",
                  fontSize: 14,
                },
                rate: {
                  color: "rgba(255,255,255,0.9)",
                  fontSize: 12,
                },
              },
            },
            data: legend,
            formatter: (name) => {
              if (seriesData.length) {
                const item = seriesData.filter((item) => item.name === name)[0];
                return `{name|${name}：}{value| ${item.value}}`;
              }
            },
          },
          series: [
            {
              name: "问题预警",
              type: "pie",
              center: ["30%", "50%"],
              radius: ["45%", "65%"],
              // hoverOffset: 30,
              // clockwise: true,
              // avoidLabelOverlap: true,
              hoverOffset: 30,

              itemStyle: {
                normal: {
                  color: function (params) {
                    return color[params.dataIndex];
                  },
                },
              },
              label: {
                normal: {
                  show: false,
                  position: "center",
                  formatter: "{value|{c}}\n{label|{b}}",
                  rich: {
                    value: {
                      padding: 5,
                      align: "center",
                      verticalAlign: "middle",
                      fontSize: 32,
                    },
                    label: {
                      align: "center",
                      verticalAlign: "middle",
                      fontSize: 16,
                    },
                  },
                },
                //将trigger的item显示在title处
                // emphasis: {
                //     show: true,
                //     textStyle: {
                //         fontSize: '12',
                //     },
                // },
              },
              labelLine: {
                show: false,
                length: 0,
                length2: 0,
              },
              data: seriesData,
            },
          ],
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

效果

页面首次渲染echarts加载失败的情况

必须放在mount钩子函数中调用，如果还失败，可以采取下面的方法

 mounted() {
     setTimeout(() => {
      this.getEchartData();
    }, 1000);
  },

如果上面的方法行不通，可以试试下面的或者放在nextTick钩子中

 mounted() {
    var timer = 0
    this.echartsset = setInterval(() => {
      timer++
      this.getEchartData();
      if(timer === 8){
        clearInterval(this.echartsset)
      }
    }, 1000);
  },