Vue接入Echarts 顯示柱狀圖餅圖

使用CLI接入

npm install echarts --save

1.可以全局引入（在main.js）

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.或者局部引入（在script）

import echarts from 'echarts'

直接在template里面寫上 div容器

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

在下邊script里邊直接繪制

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基於准備好的dom，初始化echarts實例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 繪制圖表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

這樣的基本顯示案例就完成了
然后根據你自己的要求去官網的案例里面找 合適你自己的
注意：官網上都是寫了一個 option 你把這個配置好 直接在方法里面 setOption（ option ） 就可以了
option 里邊的內容很簡單 就能看懂

知識點1

myChart.setOption({...},true)
設置為true的話，就是notMerge，不合並
false的話，就Merge，之前的東西還保留~
要是需要重新渲染的時候 可以設置清空
myChart.clear();

知識點2

你要自己設定顏色的話就寫個color
color: ["#2bb5e4","#90ed7d"],
當系列數量個數比顏色列表長度大時將循環選取

知識點3 (網上看見的)

圖表選項，包含圖表實例任何可配置選項： 公共選項 ， 組件選項 ， 數據選項

名稱	描述
{color}backgroundColor	全圖默認背景，（詳見backgroundColor），支持rgba，默認為無，透明
{Array} color	數值系列的顏色列表，（詳見color），可配數組，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，當系列數量個數比顏色列表長度大時將循環選取
{boolean}renderAsImage	非IE8-支持渲染為圖片，（詳見renderAsImage）
{boolean} calculable	是否啟用拖拽重計算特性，默認關閉，（詳見calculable，相關的還有 calculableColor， calculableHolderColor， nameConnector， valueConnector）
{boolean} animation	是否開啟動畫，默認開啟，（詳見 animation，相關的還有 addDataAnimation， animationThreshold， animationDuration， animationDurationUpdate ，animationEasing）
{Object} timeline	時間軸（詳見timeline），每個圖表最多僅有一個時間軸控件
{Object} title	標題（詳見title），每個圖表最多僅有一個標題控件
{Object} toolbox	工具箱（詳見toolbox），每個圖表最多僅有一個工具箱
{Object} tooltip	提示框（詳見tooltip），鼠標懸浮交互時的信息提示
{Object} legend	圖例（詳見legend），每個圖表最多僅有一個圖例，混搭圖表共享
{Object} dataRange	值域選擇（詳見dataRange）,值域范圍
{Object} dataZoom	數據區域縮放（詳見dataZoom）,數據展現范圍選擇
{Object} roamController	漫游縮放組件（詳見roamController）,搭配地圖使用
{Object} grid	直角坐標系內繪圖網格（詳見grid）
{Array | Object} xAxis	直角坐標系中橫軸數組（詳見xAxis），數組中每一項代表一條橫軸坐標軸，標准（1.0）中規定最多同時存在2條橫軸
{Array | Object} yAxis	直角坐標系中縱軸數組（詳見yAxis），數組中每一項代表一條縱軸坐標軸，標准（1.0）中規定最多同時存在2條縱軸
{Array} series	驅動圖表生成的數據內容（詳見series），數組中每一項代表一個系列的特殊選項及數據