Vue整合Echarts实例

引入Echarts模块：

cnpm install echarts --save

在src目录下，main.js文件中使用Echarts模块：

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

路由中写入（index.js）：

import Echarts from "@/components/Echarts";
{
  path: '/Echarts',
  name: 'Echarts',
  component: Echarts,
}

编写Echarts.vue：

<template>
  <div>
    <div id="myEcharts1" style="width: 600px;height: 400px"></div>
    <div id="myEcharts2" style="width: 600px;height: 400px"></div>
  </div>
</template>

<script>
  export default {
    name: "Echarts",
    mounted() {
      // 柱状图
      this.barPicture();

      // 饼状图
      this.piePicture();
    },
    data() {
      return {
        data1: [5, 20, 36, 10, 10, 10],
        data2: [15, 30, 50, 20, 20, 30]
      }
    },
    methods: {
      barPicture() {
        // 基于准备好的dom，初始化echarts实例
        let myEcharts1 = this.$echarts.init(document.getElementById('myEcharts1'));
        // 绘制图表
        myEcharts1.setOption({
          title: {text: 'Vue整合Echarts'},
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: this.data1 ,
              // 柱状图（柱子的宽度）
              barWidth: 50 ,
              itemStyle: {
                normal: {
                  // 设置柱子颜色
                  color: 'red',
                  label: {
                    // 显示值
                    show: true,
                    // 值在上方显示
                    position: 'top',
                    textStyle: {
                      // 值的颜色
                      color: 'red'
                    }
                  }
                }
              }
            },
            {
              name: '销量',
              type: 'line',
              data: this.data2
            }]
        });
		// Echarts（柱状图） 进行点击事件
        myEcharts1.on('click', (params) => {

          // 获取横坐标
          console.log("获取数据：" + params.name);

          // 获取纵坐标
          console.log("获取数据：" + params.data);
        })
      },
      piePicture() {
        // 基于准备好的dom，初始化echarts实例
        let myEcharts2 = this.$echarts.init(document.getElementById('myEcharts2'));
        // 绘制图表
        myEcharts2.setOption({
          backgroundColor: '#2c343c',
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              data: [
                {value: 235, name: '视频广告'},
                {value: 274, name: '联盟广告'},
                {value: 310, name: '邮件营销'},
                {value: 335, name: '直接访问'},
                {value: 400, name: '搜索引擎'}
              ],
              roseType: 'angle',
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
		// Echarts（饼状图） 进行点击事件
        myEcharts2.on('click', (params) => {

          // 获取横坐标
          console.log("获取数据：" + params.name);

          // 获取纵坐标
          console.log("获取数据：" + params.data.value);
        })
      }
    }
  }
</script>

<style scoped>

</style>

开始测试：

饼状图样式扩展：

<div id="echarts2" style="width: 600px;height: 400px"></div>

mounted() {
  this.myEcharts2();
},
data() {
  return {
  		data3: [
          {value: 1048, name: '参数一'},
          {value: 735, name: '参数二'},
          {value: 580, name: '参数三'},
          {value: 484, name: '参数四'},
          {value: 300, name: '参数五'},
          {value: 300, name: '参数六'},
        ],
  }
},
methods: {
  myEcharts2() {
        // 基于准备好的dom，初始化echarts实例
        let myEcharts2 = this.$echarts.init(document.getElementById('echarts2'));

        // 绘制图表
        myEcharts2.setOption({
          title: {
            // 文字样式
            text: '图2',
            subtext: '',
            // 可设定图例在左、右、居中（left、right、center，水平方向）
            x: "left",
            // 可设定图例在上、下、居中（top、bottom、middle，垂直方向）
            y: "top",
          },
          tooltip: {
            // 鼠标触碰，文字提示
            trigger: 'item',
          },
          legend: {
            // 参数样式（各个颜色代表什么意思）
            orient: 'vertical',
            // 可设定图例在左、右、居中（left、right、center，水平方向）
            x: "right",
            // 可设定图例在上、下、居中（top、bottom、middle，垂直方向）
            y: "middle",
          },
          series: [
            {
              name: '进度统计',
              type: 'pie',
              radius: '80%',
              data: this.data3,
              emphasis: {
                itemStyle: {
                  // 鼠标触碰饼状图时，发生的CSS样式改变（背景颜色）
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
              },
              itemStyle: {
                normal: {
                  color: function (params) {
                    // 设置饼状图各个区域颜色
                    var colorList = ['#e161ae', '#37a2d8', '#64e1e3', '#fedb5b', '#fda07e', 'red'];
                    return colorList[params.dataIndex]
                  }
                }
              }
            }
          ]
        });
		// Echarts（饼状图） 进行点击事件
        myEcharts2.on('click', (params) => {

          // 获取横坐标
          console.log("获取数据：" + params.name);

          // 获取纵坐标
          console.log("获取数据：" + params.data.value);
        })
  },
},

总结

每天一个提升小技巧！！！