Vue使用echarts

安裝echarts依賴

npm install echarts -S

 

main.js中引入

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

（對於一個vue腳手架項目來說，在main.js里使用Vue.prototype聲明的變量，實際上是為Vue對象添加了一個原型屬性）

 

准備一個DOM節點作為echarts 的渲染容器，需要定義寬高

<div id="box" style="width:100%;height:300px"></div>

 

對照echarts官網設置參數

　mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基於准備好的dom，初始化echarts實例，所以只能在mounted中調用
        let myChart = this.$echarts.init(document.getElementById('box'))
        // 繪制圖表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {　　// x坐標
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},　　// y坐標
            series: [{
                name: '銷量',
                type: 'bar',　　// 表格類型
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }

 

在webpack中使用echarts（引入)

// 引入基本模板
let echarts = require('echarts/lib/echarts')

　// let echarts = require('echarts');

// 按需引入
// 引入柱狀圖組件
require('echarts/lib/chart/bar')
// 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')