echart的安裝引入和初步使用，適合新手的教程

1、安裝：

npm安裝：

npm install echarts -S

cnpm安裝：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

2、vue項目中全局引入：

在main.js文件：

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

3、使用：

tips:能夠直接從echart官方實例粘貼一個簡單的實例到本身的組件中，看看是否可以成功展現；

echart官方實例地址：https://www.echartsjs.com/examples/ （能夠直接從官方實例複製較爲接近項目需求的option，在這基礎上進行調整）

html:

<div id="chartEle1" style="height: 400px;margin: 0 auto;width: 50%"></div>

注意必定要給準備裝echarts圖的dom容器設定高度，否則會沒法顯示！

js:

  　　mounted(){
        // 基於準備好的dom，初始化echarts實例
        this.Chart1=this.$echarts.init(document.getElementById('chartEle1')) //重點 this.setChartOption()
      },
      methods:{
        setChartOption(){
          let option = {
            title: {
              text: 'echarts使用測試',
              subtext: '純屬虛構'
              // x:'center'
            },
            color: ['#3398DB'],
            tooltip : {
              trigger: 'axis',
              axisPointer : {            // 座標軸指示器，座標軸觸發有效
                type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis : [
              {
                type : 'category',
                data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis : [
              {
                type : 'value'
              }
            ],
            series : [
              {
                name:'直接訪問',
                type:'bar',
                barWidth: '60%',
                data:[10, 52, 200, 334, 390, 330, 220]
              }
            ]
          };
          this.Chart1.setOption(option,true);
　　　　　　//setOption：設置圖表實例的配置項以及數據，萬能接口，全部參數和數據的修改均可以經過它完成，ECharts會合並新的參數和數據，而後刷新圖表。
        }
      },

上述setChartOption方法中的option對象直接粘貼自官網實例（僅在這基礎上加了標題的配置）：https://echarts.baidu.com/examples/editor.html?c=bar-tick-align&theme=light

 效果展現：

 

---

 關於echart的API和配置項，見官方文檔：

API：https://echarts.baidu.com/api.html#echarts

配置項：https://echarts.baidu.com/option.html#title

關於setOption方法的詳情：https://echarts.baidu.com/api.html#echartsInstance.setOption

此外，本文中安裝和引入的相關內容自參考博客：http://www.javashuo.com/article/p-hakbkacr-ey.html