一、ECharts官网案例

ECharts官网案例地址：https://www.echartsjs.com/examples/

二、实现效果：

我准备在vue中所要实现的效果如下：

ECharts官网饼状图案例：https://echarts.baidu.com/examples/editor.html?c=pie-rich-text&theme=light

三、开始使用案例：

1、安装echarts相关依赖

npm install echarts -S

2、Vue中全局引入echarts
在main.js文件中新增

// 全局引入echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

3、代码
demo.vue

<template>
  <div>
    <Modal v-model="modal" width="60%" :title="titleValue[state]" :footer-hide="true" @on-visible-change="handleModalClose">
      <div id="myChartDemo" :style="{width: '100%', height: '480px'}"></div>
    </Modal>
  </div>
</template>
<script>
  export default {
    name: "zhengqing-demo",
    data() {
      return {
        chartName: [],
        chartValue: [],
        modal: false,
        state: '',//分类： 0：报警   1：违章
        titleValue: {
          titile1: "ECharts Demo",
          titile2: "ECharts Demo"
        },
      };
    },
    methods: {
      open(row,state) {
        // 拿到类别信息
        var typeList = row.typeList;
        console.log(typeList);
        if (state == 0) {
          this.state = "titile1";
        } else if (state == 1) {
          this.state = "titile2";
        }
        for (let i = 0; i < typeList.length; i++) {
          var name = typeList[i].title;
          var value = typeList[i].value;
          this.chartName.push(name);
          this.chartValue.push({name: name,value: value});
        }
        this.showEcharts("myChartDemo", this.chartName, this.chartValue);
        this.modal = true;
      },
      showEcharts(id, Names, Values) {
        this.$nextTick(function() {
          this.drawPie(id, Names, Values);
        });
      },
      // 绘制饼状图
      drawPie(id, Names, Values) {
        this.charts = this.$echarts.init(document.getElementById(id));
        this.charts.on("click");
        this.charts.setOption({
          title: {
            text: 'ECharts Demo',
            subtext: '饼状图',
            left: 'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            bottom: 10,
            left: "center",
            data: Names // 扇形区域名称
          },
          series: [
            {
              type: "pie",
              radius: "65%",
              center: ["50%", "50%"],
              selectedMode: "single",
              data: Values, // 扇形区域数据
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        });
      },
      handleModalClose(val) {
        if (!val) {
          this.chartName = [];
          this.chartValue = [];
        }
      }
    }
  };
</script>

温馨小提示：

1. 这里我使用的基于vue的iView中的modal对话框弹出echarts图表信息
2. 其中row是弹出对话框传过来的data数据，row下的typeList是echarts所需要的数据，state是传过来的modal对话框自定义标题状态
3. 其中typeList如上图，是我Java后端传过来的数据信息，这里相对应的数据改成自己需要的数据即可~

四、最终实现效果图

五、总结

echarts使用起来相对入手简单，只需我们传入与其相对应的数据，复杂的图表信息多看看官方文档学习学习即可完成~