吃不胖的茶叶蛋

vue-cli 引入echarts

• 分类: vue • 标签: vue

1、 安装依赖 cnpm install echarts -S

全局引入

在main.js中

1
2
3
4
// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

局部引入

在用到的vue文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require("echarts/lib/chart/line")
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
        
    }
  },//end data()

  mounted(){
    this.getDbData();
    // this.drawLine();
  },

  methods: {
    resizeCharts (echartsDom,chartBox) {
      echartsDom.style.width = window.innerWidth+'px';
      echartsDom.style.height = (window.innerHeight-100)+'px';
    },
    getDbData(){
      const $this =this;

      this.$http.get('/warn/api/dashbord')
        .then(res => {
          $this.drawLine(res.data);
        })
        .catch(err => {

        })
    },
    drawLine(dbData){
      let chartBox = document.getElementsByClassName('charts')[0]
      let echartsDom = document.getElementById('echarts')

      this.resizeCharts(echartsDom,chartBox);
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(echartsDom); //若是全局引入，这里使用this.$echarts.init(echartsDom)
      // 绘制图表
      myChart.setOption({
          title: {
             left: 'left',
             text: '监控预警统计'
            },
          tooltip: {},
          xAxis: {
              data: dbData.data.Doing.date
          },
          yAxis: {},
          series: [{
              name: '预警提示',
              type: 'line',
              data: dbData.data.Doing.value
          },{
            name: '预警待办',
            type: 'line',
            data: dbData.data.Reading.value
          }]
      });
    }
  }//end methods
};
</script>