vue element引用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();
　}

 

注：系本人另一技術博客上的文檔https://www.cnblogs.com/nur--i/p/12206822.html