Vue 安装依赖包

npm install echarts --save

在main.js中配置echarts。

import * as echarts from 'echarts';

# 这样设置时可以在项目的任意vue文件下通过this.$echarts进行引用

Vue.prototype.$echarts = echarts;

新建一个echartsDemo.vue文件。设置折线的颜色、类型 等等其他属性

export default {

name: "echartDemo",

data () {

return {}

},

methods: {

initCharts () {

let chartDemo = this.$echarts.init(document.getElementById('chartDemo'));

chartDemo.setOption({

tooltip: {

trigger: 'axis',

// 自定义悬浮框展示的内容。此json对象的内容可自定义，我只是举个例子。{name: '内容标题'， value：'可以是任意字符，根据业务需求来吧'}

formatter(params) {

return `内容标题：${params[0].data.name} 数据：${params[0].data.value}`

}

},

// 设置折线图的大小

grid:{

x:25,

y:5,

x2:5,

y2:20,

borderWidth:1

},

xAxis: {

type: 'category',

splitLine : {

lineStyle: {

color: ['red', 'green'], // 设置网格线颜色

width: 1, // 设置网格线宽度

type: 'dashed' //设置线的类型 虚线(dashed)、实线(solid)

},

show: true

},

axisLine:{

lineStyle:{

color:'#FF0000', // 设置x轴线的颜色

type: 'dashed' // 设置x轴线的类型

}

},

// 测试数据，一般通过后天获取数据

data: ['10:05', '10:10', '10:15', '10:20', '10:25', '10:30']

},

yAxis: {

type: 'value',

min: 50, // y轴最小刻度值

max: 100, // y轴最大刻度值

splitLine : {

lineStyle: {

color: ['red', 'green'], // 设置网格线颜色

width: 1, // 设置网格线宽度

type: 'dashed' // 设置网格虚线(dashed)、实线(solid)

},

show: true // 是否显示网格线

},

axisLine: {

lineStyle: {

// 设置y轴颜色

color: '#87CEFA',

type: 'dashed'

}

},

},

series: [{

data: [76, 60, 70, 80, 90, 100],

type: 'line',

smooth: true, // 是否平滑 也可以设置为 0 到 1 的值，表示平滑程度。

symbol: 'circle', //折线点设置为实心点

symbolSize: 30, // 折线点的大小,为了方便观察，设置了30

itemStyle : {

normal : {

color: "yellow", // 设置折线点颜色

lineStyle:{

color:'red' // 设置折线颜色

}

}

},

markLine: {

silent: true,

lineStyle: {

normal: {

color: '#fe1d25' // 设置安全基线颜色

}

},

data: [{

yAxis: 90 // 设置安全基线数值

}],

label: {

normal: {

formatter: '这是安全基线' // 设置安全基线标题

}

},

}

}]

});

}

},

created() {

this.initCharts()

}

}

在element UI的抽屉里加载echarts图表，表格数据、分页查询等等

import axios from 'axios'

export default {

name: "echartDemo",

data () {

return {

page: {

pageNo: 1,

pageSize: 10,

total: 0

},

dialogTableVisible: false,

tableData: []

}

},

mounted () {

// 加载表格

this.load()

},

methods: {

// 设置表格内数据剧中

thStyleFun() {

return 'text-align:center'

},

// 替换td中的字体样式，颜色等等。

cellStyleFun() {

return 'text-align:center;font-size: 14px;font-weight: bold;color:#55C2FF'

},

// 分页查询

load (pageNo = 1) {

this.page.pageNo = pageNo;

axios.post(`/api/cycle/query?pageNo=${this.page.pageNo}&pageSize=${this.page.pageSize}`, this.query).then((resp) => {

this.page.total = resp.data.total;

this.tableData = resp.data.table;

})

},

changePageSize (pageSize) {

this.page.pageSize = pageSize;

this.load()

},

// 点击表格某一行数据时，弹出抽屉，并展示其图表信息

handleEdit(index, row) {

// 查看采集耗时详细

this.dialogTableVisible = true;

this.$nextTick(function () {

this.drawLine(row);

})

},

drawLine (row) {

let xAxisData = [];

let data1 = [];

let data2 = [];

let data3 = [];

axios.get(`/api/getCharts?id=${row.id}&collectTime=${row.collectTime}`).then((resp) => {

let data = resp.data.data;

data1=data;

data2=data;

data3=data;

let data1_len = data1.length;

for(let i = 0; i < data1_len;i++){

xAxisData.push(i)

}

let bar_dv = this.$refs.bar_dv;

let myChart = this.$echarts.init(bar_dv);

myChart.setOption({

title: {

text: '周期采集'

},

legend: {

data: ['上', '中', '下']

},

toolbox: {

feature: {

magicType: {

type: ['stack', 'tiled']

},

dataView: {},

saveAsImage: {

pixelRatio: 2

}

}

},

tooltip: {

trigger: 'axis',

formatter(params) {

return `设备编号：${params[0].data.name} 采集耗时：${params[0].data.value}`

}

},

xAxis: {

data: xAxisData,

splitLine: {

show: false

}

},

yAxis: {

type: 'value',

name: '时间/秒',

min: 0

},

series: [{

name: '上',

type: 'bar',

barWidth: 20,

data: data1,

animationDelay: function (idx) {

return idx * 10;

},

markLine : {

symbol: 'none',

itemStyle: {

normal: {

color: '#4985de',

label: {

show: true,

position: 'middle'

}

}

},

data : [

{type :'average', name: '平均值'}

],

}

}, {

name: '中',

type: 'bar',

data: data2,

animationDelay: function (idx) {

return idx * 10 + 100;

}

}, {

name: '下',

type: 'bar',

data: data3,

animationDelay: function (idx) {

return idx * 10 + 100;

}

}],

animationEasing: 'elasticOut'

})

}).catch((e) => {

this.$message.error(e.response.message);

})

}

}

}