Vue整合echarts使用案例

文
章
目
录

• 第1步 安装echarts
• 第2步：导入echarts
• 1）全局引入
• 2）局部引入
• 第3步 vue绘制echarts饼状图案例
• 1）准备一个容器来存放echarts
•  2）实现绘制
• 查看效果

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页面中使用即可。

注意：如果echarts的版本在5.0以上，据说好像只能局部引入，全局引入会出错，没试过，大家稍微注意下

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

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

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

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

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

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

注意：这里需要设置容器宽高，否则会无法绘制出来，具体参考：《echarts提示Can’t get DOM width or height解决办法》

 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替换到上面的代码，我们运行看下效果如下：