Vue整合echarts使用案例

Vue如何整合echarts来画各种图表？比如饼状图、条形图等等，这里潘老师来带大家一起看下Vue应该如何整合echarts来绘制图表的使用案例。

第1步 安装echarts

首先我们vue项目需要安装echarts，安装指令如下：

npm i echarts

如果你想指定echarts版本，比如我这里使用的是V5.4.3版本。可以使用类似如下指令：

npm install echarts@5.4.3 --save

第2步：导入echarts

接下来我们需要导入echarts，这里有两种方式，一种是全局导入，一种是局部导入，根据自己需求选择吧。

1）全局引入

在main.js文件中添加如下：

//全局引入echarts
import * as echarts from 'echarts';
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts;

2）局部引入

// 方式1
let echarts = require(‘echarts’);
// 方式2
import * as echarts from "echarts";

以上两种方式都可以，只需要在需要绘制图表的vue页面中使用即可。

第3步 vue绘制echarts饼状图案例

这里我们绘制一个饼状图，需要有以下几个步骤：

1）准备一个容器来存放echarts

配置好ref属性，用于后面初始化容器获取DOM。

<div ref="mychart" style="width:300px;height:500px"></div>

这里ref也可以换为id="mychart"，只要在后面初始化时使用document.getElementById("mychart")就行

 2）实现绘制

接下来我们写绘制方法

<script>
// 局部导入echarts
import * as echarts from "echarts";
export default {
    name: 'DataChart',
    data() {
        return {

        };
    },
    mounted() {
        // 挂载时初始化图表
        this.echartsInit();
    },
    methods: {
        // 初始化图表方法
        echartsInit() {
         //初始化容器
         const myChart = echarts.init(this.$refs.mychart); 
         // 这里面就是图表的各种配置项，具体参考官方文档
         const option = {};
         myChart.setOption(option);
        }
    },
};
</script>

这里饼状图的option案例类似如下：

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

更多echarts图表option参考官方文档：《echarts所有图表官方示例》

查看效果

将饼图的option替换到上面的代码，我们运行看下效果如下：

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)