一、项目介绍与安装
这个是老项目vue-cli2（vue init webpakc 项目名）构建的项目，不是用vue-cli3（vue create 项目名）构建的项目。听人网友反馈，vue这种老项目，还是安装5.x以下的echarts比较好。
安装echarts
npm install [email protected] --save
npm有时安装会出错，用cnpm安装会更好
cnpm install [email protected] --save
二、引入与配置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文档。
下面是我浏览器的运行结果：
完美收工，如果这篇博客对你有所帮助的话，请留下你的点赞吧。你们的点赞为我提供继续创作的动力哦，谢谢各位看官的支持啦！