vue項目中使用echarts

本文包含在vue項目中如何使用echarts，以及項目中經常會遇到的圖表樣式的寫法

https://echarts.baidu.com/echarts2/doc/example.html
（echart實例，包含餅狀圖、柱狀圖等等圖表例子，你可以找到你所需要的圖表類型）

https://echarts.baidu.com/echarts2/doc/doc.html
（echarts 使用文檔，里面有很多屬性和方法可供參考哦）

---

1.安裝echarts包

cnpm install echarts --save

2.引入到項目中

a.全局引入 （在main.js中引入）

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
這種方法是直接綁定在vue實例上，所以在項目中任何頁面，直接 this.$echarts 即可

b.局部引入（在所需頁面引入）

import echarts from 'echarts'

3.初始化echarts

a.首先在你需要echarts的頁面中得創建一個dom元素

 <div id="myCharts" ref="myCharts"></div>

b.其次，在mounted中初始化echarts( 不能寫在created中哦)（ 以下例子為折線圖）

mounted(){
    以下三步即可完成echarts的初始化使用,代碼注釋的詳解別忘了看看
   1.  const  myCharts = this.$echarts.init(this.$refs.myCharts);
   2.   let options = {
          title: { 
             text: '未來一周氣溫變化',   //圖表頂部的標題 
             subtext: '純屬虛構'    //副標題
          },
          tooltip: {   //鼠標懸浮框的提示文字
              trigger: 'axis'
            },
          legend: {
            data:['最高氣溫','最低氣溫']
          },
          xAxis : [{  //x軸坐標數據
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
            }],
           yAxis : [{   //y軸坐標數據
              type : 'value',
              axisLabel : {
                formatter: '{value} °C'
              }
            }],
          series: [  //驅動圖表生成的數據內容數組，幾條折現，數組中就會有幾個對應對象，來表示對應的折線
            {
              name:"最高氣溫",
              type: "line",  //pie->餅狀圖  line->折線圖  bar->柱狀圖
              data:[11, 11, 15, 13, 12, 13, 10], 
              },
            {
              name:"最低氣溫",
              type: "line",  //pie->餅狀圖  line->折線圖  bar->柱狀圖
              data:[1, -2, 2, 5, 3, 2, 0],
              }
          ]}

    3.  myCharts.setOption(options);
}

echarts中常用方法 https://www.jianshu.com/p/4f459d16e8b4

轉自:https://www.jianshu.com/p/df87d92fd847