vue 引用echarts控件进行数据可视化显示

最近公司在项目的开发中引入echarts，运行时发现有些问题

在使用echarts的时候，下载按钮显示数据不全

代码如下：

            toolbox: {

              feature: {
                saveAsImage: {}
              }
            },

界面效果如下：

查找echarts api，找到关于图形下载按钮的代码可做修改如下

代码如下：

            toolbox: {
              right: 20,
              feature: {
                saveAsImage: {}
              }
            },

界面效果如下：

修改完代码，对echarts引用进行了分析，总结如下：

准备工作，需要先echarts插件

npm install echarts -S

我们项目中只是个别页面进行了引用，于是只在单个组件内使用，进行了局部引用

import echarts from "echarts";
require("echarts/theme/macarons");// echarts theme  主题组件

如果项目中使用界面较多，可以使用全局引用

在main.js中引入echarts，将其绑定到vue原型上

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

在项目的任何地方使用echarts都可以这样使用

methods: {
　　initCharts () {
　　let myChart = this.$echarts.init(this.$refs.chart);
　　console.log(this.$refs.chart)
　　// 绘制图表
　　myChart.setOption({
　　title: { text: '在Vue中使用echarts' },
　　tooltip: {},
　　xAxis: {
　　data: ["西湖区","拱墅区"]
　　},
　　yAxis: {},
　　series: [{
　　name: '数量',
　　type: 'bar',
　　data: [5, 20, 36, 10, 10, 20]
　　}]
　　});
　　}
　  },
　  mounted () {
　　this.initCharts();
　}