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图表，表格数据、分页查询等等
:cell-style="cellStyleFun" class="main-table">
查看
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);
})
}
}
}