vue2项目，echarts图表库的使用

一、项目介绍与安装

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

安装echarts

npm install echarts@4.9.0 --save

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

cnpm install echarts@4.9.0 --save

echarts官网

二、引入与配置echarts

1、全局引入

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

全局引入，项目打包后，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

main.js文件：

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

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

三、在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>

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

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