Vue中使用Echarts

基本用法

• 打开终端输入：npm install echarts --save
• 在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 './assets/css/base.css'

import echarts from 'echarts'

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts

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

• 在需要使用的组件页面中
  1、template中的代码

<div id="sCharts"></div>

2、script中的代码

export default {
  methods: {
    //   图表
    initEcharts () {
      let myChart = this.$echarts.init(document.getElementById('sCharts'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '总体积',
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: '{value} m³'
            }
          },
          {
            type: 'value',
            name: '使用负荷',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '总体积',
            type: 'bar',
            data: [
              2.0,
              4.9,
              5.5,
              2.2,
              4.6,
              6.7,
              5.6,
              6.2,
              3.6,
              2.0,
              6.4,
              3.3
            ],
            itemStyle: {
              normal: {
                color: '#d0e17d'
              }
            }
            // label: {
            //   show: true
            // }
          },
          {
            name: '使用负荷',
            type: 'line',
            yAxisIndex: 1,
            data: [
              100,
              22,
              33,
              45,
              63,
              80,
              20,
              23,
              23,
              65,
              12,
              6.2
            ],
            itemStyle: {
              normal: {
                color: '#898989'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted () {
    this.initEcharts()
  }
}

3、css中的代码

#sCharts {
     height: 500px;
   }