当前位置:   article > 正文

vue2项目,echarts图表库的使用_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文档。
下面是我浏览器的运行结果:
在这里插入图片描述
完美收工,如果这篇博客对你有所帮助的话,请留下你的点赞吧。你们的点赞为我提供继续创作的动力哦,谢谢各位看官的支持啦!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号