vue整合ECharts

1.使用npm添加package.json文件中的配置並下載相關npm包依賴

npm install echarts --save

2.而後在項目文件的入口js文件main.js中添加

import echarts from "echarts"

3在須要添加圖標的組件中建立依賴的實例

var echarts = require('echarts');

main.js

// The Vue build version to load with the `import` command
		// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
		import Vue from 'vue'
		import App from './App'
		import router from './router'
		import $ from 'jquery'
		import './../static/css/global.css'
		import './../static/css/select.css'
		import './icons'
		import axios from 'axios';
		import './util/request'
		import commonDate from './util/commonDate';
		import common from './util/common';
		import Element from 'element-ui'
		import 'element-ui/lib/theme-chalk/index.css'
		import './../static/css/element-ui-ext.css'
		import echarts from 'echarts'
		require("./../static/js/rtsp_player.1.8.js");
		//地圖js
		Vue.prototype.$commonDate = commonDate;
		Vue.prototype.$common = common;
		Vue.prototype.$axios = axios;
		// 引入echarts
		Vue.prototype.$echarts = echarts
		Vue.config.productionTip = false

		Vue.use(Element)

		/* eslint-disable no-new */
		new Vue({
		  el: '#app',
		  router,
		  components: {App},
		  template: '<App/>'
		})

4.上手使用

示例：

1.建立三個組件

2.編寫ChartsView.vue

<template>

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

</template>

<script>
    export default {
      name: "ChartsView",
      components: {
      },
      data(){
        return{
          data:[],
          title:[],
          array:[]
        }
      },

      mounted(){
        this.init();
      },
      created(){

      },
      methods: {

        init(){
          /*分紅兩個集合*/
          this.data = [];
          this.title = [];
          for(var i =0;i<this.array.length; i++){
            this.data.push(this.array[i].count)
            this.title.push(this.array[i].title)
          }

          this.drawLine();
        },
        drawLine(){
          // 基於準備好的dom，初始化echarts實例
          let myChart = this.$echarts.init(document.getElementById('myChart'))
          // 繪製圖表
          myChart.setOption({
            show:true,
            title:{
              shadowColor:'blue'
            },
            animation: true,
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.title
            },
            yAxis: {
              type: 'value'
            },
            textStyle:{
              color:"#FFF",
            },

            areaStyle:{
            },
            series: [{
              data: this.data,
              type: 'line',
              areaStyle: {},
              // itemStyle: {
              //   color:"#4480C4"
              // }
              symbol:'none',  //這句就是去掉點的
              smooth:true,  //這句就是讓曲線變平滑的
            }],

            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0, color: 'blue' // 0% 處的顏色
                },
                {
                  offset: 0.5, color: '#84C1FF' // 100% 處的顏色
                },
                {
                  offset: 0.6, color: '#D2E9FF' // 100% 處的顏色
                },
                {
                  offset: 1, color: '#84C1FF' // 100% 處的顏色
                },
              ],
              globalCoord: false // 缺省爲 false
            }

          },true);
        },
      }
    }
</script>



<style scoped>
  #myChart{
    padding-top: 80px;
    color: white;
  }
</style>

3.編寫底下兩個組件（沒有作組件複用，寫好一個直接複製另外一個)

<template>

  <div id="myChartBar" :style="{width: '600px', height: '400px'}"></div>

</template>

<script>
  export default {
    name: "ChartsBarView",
    mounted(){
      this.init();
    },
    created(){

    },
    data(){
      return{
        name:[],
        val:[],
      }
    },
    props: {
      dataList: {
        type: [Array],
      },
    },
    methods: {
      dest(){
        this.$destroy(true);
        console.log(1)
      },
      init(){
        /*循環取值*/
        this.name = [];
        this.val = [];
        for(var i =0;i<this.dataList.length; i++){
          this.name.push(this.dataList[i].name)
          this.val.push(this.dataList[i].value)
        }
        this.drawLine();
      },

      drawLine(){
        // 基於準備好的dom，初始化echarts實例
        let myChartBar = this.$echarts.init(document.getElementById('myChartBar'))
        // 繪製圖表
        myChartBar.setOption({

          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 座標軸指示器，座標軸觸發有效
              type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
            }
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              //dataView : {show: true, readOnly: false},
              //magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              //restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'value'
            }
          ],
          yAxis : [
            {
              type : 'category',
              data : this.name
            }
          ],
          textStyle:{
            color:"#FFF",
          },
          series : [
            {
              name:'告警視頻源TOP5',
              type:'bar',
              stack: '次數',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:this.val
            },

          ],
          color: {
            type: 'line',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0, color: 'transparent' // 0% 處的顏色
              },
              {
                offset: 0.3, color: '#265080' // 50% 處的顏色
              },
              {
                offset: 0.7, color: '#4ca0ff' // 70% 處的顏色
              },
              {
                offset: 1, color: '#448CDF' // 100% 處的顏色
              },
            ],
            globalCoord: false // 缺省爲 false
          }
        });
      }
    }
  }
</script>



<style scoped>
#myChartBar{
  padding-top: 40px;
}
</style>

須要注意，兩個相同的組件，這兩個地方不同

使用組件

import ChartsView from '../chartsView/ChartsView'
 import ChartsBarView from '../chartsView/ChartsBarView'
 import ChartsBarView2 from '../chartsView/ChartsBarView2'

	 <div>
            <ChartsView ref="sjtj" :dataList="figureData"></ChartsView>
     </div>
	 <div>
            <ChartsBarView ref="gjsp" :dataList="gaoJinSPTop5"></ChartsBarView>
     </div>
	  <div>
            <ChartsBarView2 ref="gjrx" :dataList="gaoJinRXTop5"></ChartsBarView2>
     </div>

效果就出來了！