vue2项目，echarts图表库的使用_vue2 echarts

一、项目介绍与安装

这个是老项目vue-cli2（vue init webpakc 项目名）构建的项目，不是用vue-cli3（vue create 项目名）构建的项目。听人网友反馈，vue这种老项目，还是安装5.x以下的echarts比较好。

安装echarts

npm install echarts@4.9.0 --save
1

npm有时安装会出错，用cnpm安装会更好

cnpm install echarts@4.9.0 --save
1

echarts官网

二、引入与配置echarts

1、全局引入

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
Vue.use(echarts)
1
2
3

全局引入，项目打包后，echarts包的体积会比较大，大概是为2MB左右，而按需引入则在几百kb左右，包的体积越大会越降低用户体验。不过全局引用就图个方便，请按项目实际需求引入。

2、按需引入

因为我们是4.9.0版本的echarts，所以不能用官网echarts的按需引入方法，因为那是5.x版本的。
新建个echarts.js文件：

let echarts = require('echarts/lib/echarts')
// 系列类型文档速查
require('echarts/lib/chart/bar')			// 柱状图
require('echarts/lib/chart/pie')			// 饼图
require('echarts/lib/chart/line')			// 折线图
// 组件文档速查
require('echarts/lib/component/tooltip')  // 标题
require('echarts/lib/component/title')  // 提示栏
require('echarts/lib/component/legend')  // 图例
require('echarts/lib/component/markPoint')   // 标注
require('echarts/lib/component/dataZoom')  // 数据区域缩放

// https://echarts.apache.org/zh/cheat-sheet.html  引入时的参考网址

export default echarts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

main.js文件：

import echarts from 'echarts';
Vue.prototype.$echarts = echarts
Vue.use(echarts)
1
2
3

引入时的参考网址：术语速查手册
系列类型文档速查注释部分对应参考网站中的系列类型文档速查，只需换掉文件路径的最后一个词就可以了。

三、在vue文件中使用

后台返回的data格式
echart.vue文件：

/**
温度详情查看中的echarts图表，监控标本或标本箱某段时间内的温度详情变化
使用：
*/
<template>
  <div class="temperature-echart">
    <div :id="echartsId"  :style="{width: '100%', height: '400px'}"></div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "TemperatureEchart",
  props: {
    echartData: { type: Array, default() { return [] } },
    upperWarningLimit: { default: 0 },
    lowerWarningLimit: { default: 0 },
    echartsId: { default: "echarts-demo" }
  },
  data() {
    return {
      myChart: {}
    }
  },
  watch: {
    echartData: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          this.drawLine(newVal, this.upperWarningLimit, this.lowerWarningLimit)
        }
      },
      deep: true
    }
  },
  mounted() {
    if (this.echartData.length > 0) {
      this.drawLine(this.echartData, this.upperWarningLimit, this.lowerWarningLimit)
    }
  },
  methods: {
    drawLine(data, upperWarningLimit, lowerWarningLimit) {
      if (!data || data.length === 0) return;
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById(this.echartsId))
      const numArr = data.map(item => item.value).concat([upperWarningLimit, lowerWarningLimit])
      const numMax = Math.max(...numArr) + 2, numMin = Math.min(...numArr) - 2
      // 绘制图表
      this.myChart.setOption({
        color: ["blue"],  // 线的颜色
        xAxis: {
          type: 'category',
          data: data.map(item => moment(item.valueTime).format("YYYY-MM-DD HH:mm:ss")),
          axisLine: {
            onZero: false
          },
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          max: numMax,
          min: numMin,
          axisTick: {
            show: false
          }
        },
        grid: {  // 偏移量。xAixs/yAxis/grid在多轴时，可以为数组
          left: "5%",
          rigth: "0%"
        },
        dataZoom: [  // echarts的收缩配置
          // { type: "slider" },
          { type: "inside" },
        ],
        series: [{  // 图表数据的配置
          data: data.map(item => item),
          type: 'line',
          smooth: true,
          // showAllSymbol: true
          markLine: {  // 辅助线
            data: [{
                name: 'upperWarningLine',
                yAxis: upperWarningLimit
              },
              {
                name: 'lowerWarningLine',
                yAxis: lowerWarningLimit
              }
            ],
            itemStyle: {  // 辅助线的样式
              normal: {
                borderWidth: 2,
                lineStyle: {
                  type: 'dashed',
                  color: 'red',
                  width: 1
                },
              }
            }
          },
          markPoint: {  // 气泡
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ],
            itemStyle: {  // 气泡的背景色
              color: "rgba(0, 0, 0, 0)"
            },
            silent: true,
            label: {  // 气泡的文字
              color: "#000",
              fontWeight: "bold",
              formatter(params) {
                return params.value + "℃"
              }
            }
          },
        }],
        tooltip: {  // 提示栏
          textStyle: {
            align: 'left'
          },
          trigger: 'item',
          formatter: function (params) {
            const componentType = params.componentType
            if (componentType == "markLine") {
              return `温度上限：${upperWarningLimit}℃ <br /> 温度下限：${lowerWarningLimit}℃ <br />`
            } else if (componentType == "series") {
              return `温度：${params.data.valueStr}<br /> 
                电量：${params.data.eleValueStr} <br /> 
                标本箱码：${params.data.specimenBoxCode} <br /> 
                线路名称：${params.data.lineName} <br /> 
                位置：${params.data.position} <br /> 
                状态：${params.data.alarmStr} <br /> 
                时间：${params.data.valueTime} `
            }
          }
        }
      }, true);
    }
  }
}
</script>
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

这个文件是我项目中的文件，直接复制是无效的，仅供参考。具体的处理逻辑与配置项请参考echarts文档。
下面是我浏览器的运行结果：

完美收工，如果这篇博客对你有所帮助的话，请留下你的点赞吧。你们的点赞为我提供继续创作的动力哦，谢谢各位看官的支持啦！