vue 項目引入echarts

vue 項目引入echarts
主要介紹了vue 項目引入echarts 添加點擊事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧


最近前端產品中有數據統計分析的需求，需要展示多種圖表，包括折線圖、柱狀圖、餅圖、熱力圖等。

 
最后選擇了常用圖表框架ECharts；

 
在vue項目中引入ECharts的步驟如下：

 
1、安裝Echats

 
npm install echarts --save
 
2、項目main.js中引入Echarts

 
// 引入Echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
 
3、項目中使用，掛載一個圖表到一個div標簽上

 
<div id="myMiddleChart" :style="{width: '300px',height: '300px'}"></div>
 

export default {
  data() {
    return {
      //圖表配置項對象
      middleChartExtend: {
        color: ["#5ACC23"],  //柱狀圖的柱子顏色
        tooltip: {           //是否顯示提示工具
          show: true
        },
        xAxis: {             //X坐標配置項
          type: "category",
          axisPointer: { show: true },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
          ]
        },
        yAxis: {             //y坐標配置項
          type: "value",
          minInterval: 1,
          onZero: false,
          axisLine: {
            show: false,
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: "{value} min"
          },
          splitLine: {
            show: true,
            lineStyle: {
              // color: "#F5F7F8"
            }
          }
        },
        series: {             //圖表內容數據配置項
          name: "平均時間",
          type: "bar",        //顯示成柱狀圖
          barWidth: 10,       //柱子寬度為10
          data: []            //每項數據，動態賦予
        },
        grid: {               //圖表屬性配置項，一個圖表對應一個grid
          top: "3%",
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true
        }
      },
      myMiddleChartObj: null        //圖表對象
    };
  },
  methods: {
    getData(){   //獲取數據並賦值給middleChartExtend.series.data

    },
    drawMiddleChart() {             //繪制圖表方法
      this.myMiddleChartObj = this.$echarts.init(
        document.getElementById("myMiddleChart")
      );
      //將圖表配置項賦給圖表,true參數表示不和之前的數據合並
      this.myMiddleChartObj.setOption(this.middleChartExtend, true);   
    }
  },
  mounted() {
    this.drawMiddleChart();
  }
 
效果圖如下：
 在這里插入圖片描述