vue使用echarts学习实践（饼图、中国地图）

前言

---

近期写项目的时候使用到了echarts的图表，一个饼状图和一个中国地图散点图，之前也用过柱状图、关系图、饼图、折线图等等，但是都没总结过文档，这次就趁着来写一些关于饼图和中国地图的基本制作。

---

样式展现

中国地图散点图

饼图

---

中国地图散点图实现步骤

1. 在页面中引入echarts

import echarts from "echarts";
import "../../../node_modules/echarts/map/js/china.js"; // 数据

2. 在页面中给地图创建一个容器

<div style="width: 50%;">
   <div id="main"></div>
</div>

3. 在事件中实例化一个地图对象以及对它的属性设置

draw() {
  // 实例化
  const ec = echarts as any;
  const myChart = ec.init(document.getElementById("main"));
  // 设置属性
  const option = {
        // 标题，会出现在读题的正上方，这里的标题项目中没有用到，所以我没有写
        title: {
          text: "",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            let res = params.name + "<br/>";
            let myseries: any = option.series;
            for (let val1 of myseries) {
              for (let val2 of val1.data) {
                if (val2.name == params.name) {
                  res += val1.name + " : " + val2.value + "</br>";
                }
              }
            }
            return res;
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["免费版", "初级版", "中级版", "高级版", "旗舰版"],
        },
        visualMap: {
          min: 0,
          max: 150,
          left: "left",
          top: "bottom",
          text: ["300", "0"], // 文本，默认为数值文本
          calculable: false,
          color: ["#015C85", "#D7EEF8"],
        },
        series: [{
            name: "免费版",
            type: "map",
            mapType: "china",
            label: {
              normal: {
                show: true,
                color: "#000",
              },
              emphasis: {
                // 鼠标移入动态的时候显示的默认样式
                color: "green",
              },
            },
            data: this.sourceData[0],
          },
          {
            name: "初级版",
            type: "map",
            mapType: "china",
            label: {
              normal: {
                show: true,
                color: "#000",
              },
            },
            data: this.sourceData[1],
          },
          {
            name: "中级版",
            type: "map",
            mapType: "china",
            label: {
              normal: {
                show: true,
                color: "#000",
              },
            },
            data: this.sourceData[2],
          },
          {
            name: "高级版",
            type: "map",
            mapType: "china",
            label: {
              normal: {
                show: true,
                color: "#000",
              },
            },
            data: this.sourceData[3],
          },
          {
            name: "旗舰版",
            type: "map",
            mapType: "china",
            label: {
              normal: {
                show: true,
                color: "#000",
              },
            },
            data: this.sourceData[4], // 动态添加数据，这里你们可以放上自己的一些数据
          },
        ],
  }
}
// 事件写完之后将这个事件在created函数中调用一下

---

饼图实现步骤

它们的逻辑方法都是一样的，不同的是他们的属性会有变化，我引入和创建容器就不说了，上面都有，直接看方法里面的：

roundDraw() {
      // 同样需要先实例化
      const ec = echarts as any;
      const myChart = ec.init(document.getElementById('roundEcharts'))
      // 设置属性
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          show: false
        },
        graphic: [{ // 环形图中间添加文字
          type: 'text', // 通过不同top值可以设置上下显示
          left: 'center',
          top: '40%',
          style: {
            text: '' + this.vipDataNum, // 自定义文字
            textAlign: 'center',
            fill: '#000', // 文字的颜色
            width: 30,
            height: 30,
            fontSize: 30,
            color: "#4d4f5c",
            fontFamily: "Microsoft YaHei"
          }
        }, {
          type: 'text',
          left: 'center',
          top: '60%',
          style: {
            text: '门店总数',
            textAlign: 'center',
            fill: '#8D99A3',
            width: 30,
            height: 30,
            fontSize: 10,
          }
        }],
        // color: ['#F75B27', '#27F09F'],
        color: ['#2DB7F5', '#7EC856','#F9BF00','#808BC6','#5D6977'],
        series: [{
          name: "品牌概况",
          type: 'pie',
          radius: ['55%', '65%'], // 设置环形的宽度
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            // emphasis: { // 设置data 居中文字效果
            //     show: false,
            //     textStyle: {
            //         fontSize: '10',
            //         fontWeight: 'bold'
            //     }
            // }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: this.versions // 设置动态数据
        }]
      })
}

后来查询这饼图动态渲染数据，发现有位博主写的很好
ecgarts饼状图动态数据渲染

---

事件

echarts 支持常规的鼠标事件类型都有：

‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。

区分鼠标点击到了哪里

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }
});

这些方法是从官网拿过来了，还是建议大家多看看官网，官网有很多东西讲的很详细
echarts官网

echarts就分享到这里，以上讲解了一些皮毛，如他日遇到干货会继续来分享的。啾咪~

---

待续~