vue中使用echarts组件(基本配置、柱状图、饼图、自定义圆环图并显示数据在图例legend旁)

1. 安装echarts

npm install echarts -S

安装完成之后，就可以直接使用了
注意：
如果在安装echarts之后，在main.js进行了全局引入:

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

再到Chart.vue中使用：

myChart = this.$echarts.init(this.$refs.myChart)

此时，运行后可能会报错：

Uncaught TypeError: Cannot read property 'init' of undefined

解决方法就是在使用之前引入echarts即可：

var echarts = require("echarts"); //引入echarts
let myChart = echarts.init(this.$refs.myChart);

2. 使用echarts：创建一个vue文件，如Chart.vue，在该文件中绘制图表

<template>
  <div>
    <div ref="myChart" style="width:100%;height:300px"></div>
    <div ref="myChart2" style="width:100%;height:300px"></div>
    <div ref="myChart3" style="width:100%;height:300px"></div>
  </div>
</template>

<script>
export default {
  name: "Chart",
  methods: {
    drawChart() {
      var echarts = require("echarts"); //引入echarts
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      let myChart2 = echarts.init(this.$refs.myChart2);
      let myChart3 = echarts.init(this.$refs.myChart3);
      //图表内容
      let option = {
        //为图表配置标题
        title: {
          text: "柱状/条形图",
        },
        //配置提示信息
        tooltip: {}, //有这句话，鼠标放上去会提示相应数据
        //配置要在 X 轴显示的项
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        //配置要在 Y 轴显示的项
        yAxis: {},
        //系列列表：每个系列通过 type 决定自己的图表类型
        series: [
          {
            name: "销量", //系列名称
            type: "bar", //系列图表类型 bar：柱状/条形图
            data: [5, 20, 36, 10, 10, 20], //系列中的数据内容
          },
        ],
      };
      let option2 = {
        title: {
          text: "系统饼图 -> 南丁格尔图",
        },
        tooltip: {},
        //图例组件：展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        legend: {
          orient: "vertical",
          x: "left", //可设定图例在左、右、居中
          y: "top", //可设定图例在上、下、居中
          padding: [0, 0, 0, 400], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: ["视频广告", "联盟广告", "邮件营销", "直接访问", "搜索引擎"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            roseType: "angle", //也可以通过设置参数把饼图显示成南丁格尔图。
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: "视频广告" },
              { value: 274, name: "联盟广告" },
              { value: 310, name: "邮件营销" },
              { value: 335, name: "直接访问" },
              { value: 400, name: "搜索引擎" },
            ],
          },
        ],
      };
      let option3 = {
        title: {
          text: "自定义圆环图",
        },
        color: ["#CBFEF8", "#FDFDE3", "#F3E5FE", "#A6FFE5", "#FAE5EC"],
        tooltip: {},
        legend: {
          x: "46%",
          y: "28%",
          orient: "vertical",
          data: ["aa", "bb", "cc", "dd", "ee"],
          formatter: function(name) {
            var index = 0;
            var clientlabels = ["aa", "bb", "cc", "dd", "ee"];
            var clientcounts = [800, 300, 200, 500, 400];
            clientlabels.forEach(function(value, i) {
              if (value == name) {
                index = i;
              }
            });
            return name + "  " + clientcounts[index];
          },
        },

        calculable: false,
        series: [
          {
            name: "myCharts",
            type: "pie",
            //radius: "50%", // 设置为圆饼
            radius: ["30%", "60%"], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ["25%", "47%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置

            startAngle: 90, //开始旋转的角度

            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "inner",
                },
                labelLine: {
                  show: false,
                },
              },
            },
            /*
             itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outer",
                },
                labelLine: {
                  show: true,
                },
              },
            },
            */
            data: [
              { value: 800, name: "aa" },
              { value: 300, name: "bb" },
              { value: 200, name: "cc" },
              { value: 500, name: "dd" },
              { value: 400, name: "ee" },
            ],
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
    },
  },
  mounted() {
    //在mounted中调用,确保myChart需要展示的标签渲染出来
    this.$nextTick(() => {
      setTimeout(() => {
        this.drawChart();
      });
    });
  },
};
</script>

<style scoped></style>

3. 效果图展示：