vue echarts 动态传值更新
效果展示
前言
- 很多时候需要从后端获取值更新图表，这就涉及到动态更新图表数据；
- 使用echarts的时候，往往需要x轴和y轴的一一对应数组，比如
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
但是后端传值往往是一个json 串，是对象数组。常见的做法是递归遍历整个对象数组，然后处理好数据放到xy轴数组中
这样有两个比较明显的缺陷：
① 遍历费时费力
② 如果很多图表的数据都来自同一个数据集，只不过取不一样的属性，那么每一个图表都要处理一次数据，会很麻烦且低效
解决方案：
- 使用动态传值，从而在获得后台数据的时候更新组件
- 使用dataset数据集作为图表数据的数据来源，而不是xy轴
首先介绍dataset的使用
echarts的dataset介绍
先简单介绍，后面附上个人真实的对象数组使用案例
二维数组也可以
数组中多个对象也可以
也可以给出维度，然后下面是数值
使用的时候，定义dataset，和xy轴同级
然后再series中写encode
encode: {x: 3, y: 10}
代表第三列为x轴，第4列为y轴
当数据是一个数组，数组中有很多对象，对象有很多属性的时候
{
"resultList":[
{
"id":null,
"炉号":"1#号炉",
"牌号":"FeMn65Si17",
"入炉锰":32,
"锰铁比":5.6,
"碱度":0.7,
"锰含量期望值":0.653,
"硅含量期望值":0.175,
"原料分析":"{"澳块":51.388468666485664,"澳粉":0.0,"马来矿":5.353728277965526,"南非块":32.84896368721372,"南非高铁":5.880044980973386}",
"配料分析":"22.81,2280.75,17.23,1722.99",
"总价格":13550.86,
"产品分析":"40.81,67.5,16.5,0.14,32.03,5.57",
"炉渣分析":"0.34,30.21,7.53,0.73,39.07,18.84,7.34,10.24,0.01,0.67",
"createDate":1608624589705,
"feedDate":null
},
{
"id":null,
"炉号":"1#号炉",
"牌号":"FeMn65Si17",
"入炉锰":32.2,
"锰铁比":5.6,
"碱度":0.7,
"锰含量期望值":0.653,
"硅含量期望值":0.175,
"原料分析":"{"澳块":43.00457988544515,"澳粉":0.0,"马来矿":24.998498398214664,"南非块":31.996921716340182,"南非高铁":0.0}",
"配料分析":"23.01,2301.17,12.57,1256.94",
"总价格":13558.11,
"产品分析":"41.06,67.5,16.5,0.2,32.23,5.5",
"炉渣分析":"0.25,31.23,7.33,0.72,38.04,17.9,7.58,12.86,0.01,0.67",
"createDate":1608624589837,
"feedDate":null
},
}
可以事先定义好维度
使用的时候就可以不用列号而是使用定义的维度名
后附上完整代码
vue Echarts 动态赋值
① dataset中定义一个空的source列表
② 写一个函数 为数据赋值
getEchartsData() {
this.chartLine.setOption(
{
dataset: {
source: this.dataList,
}
}
)
}
③ 在传值过来的数组发生改变时调用重新复制
watch: {
dataList() {
this.getEchartsData(); // 当数据变化时重新赋值图线
}
},
完整带注释代码
1. HTML中图表定义
<div id="calculateChart" class="chart-container"></div>
2. option定义
data() {
return {
option: {
title: {
// text: 'ECharts 入门示例' // 标题
},
tooltip: { // 鼠标悬浮触发事件
trigger: 'axis', // 鼠标悬浮会有竖线
// triggerOn: 'click', // 触发方式是点击，默认是none悬浮 实现全图表点击，可以用点击tooltip实现
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'cross',
// 默认为直线，可选为：'line' | 'shadow | cross'
crossStyle: {
color: 'red', // cross横线的颜色
},
label: {
// backgroundColor : 'red' // 上图显示的颜色
backgroundColor: '#5184F7', // 上图显示的颜色 type 使用 cross 能出现一个很炫酷的十字交叉
}
},
formatter(params) {
let result = '';
params.forEach(function (item) {
// ${item.marker} 是小圆点
result += `${item.marker}入炉锰：${item.value.入炉锰}<br>${item.marker}总价格：${item.value.总价格}`; // 更改悬浮显示 通过加入 <br> 实现换行
})
return result;
},
extraCssText:'width:150px; white-space:pre-wrap' // 定义悬浮框的宽度以及换行
},
dataset: { // 数据集
// 自定义数据维度
dimensions: ['id', '炉号', '牌号', '入炉锰', '锰铁比', '碱度', '锰含量期望值', '硅含量期望值', '原料分析', '配料分析', '总价格', '产品分析', '炉渣分析', 'createDate', 'feedDate'],
source: [], // 数据源，可以动态赋值
},
grid: { // 图表偏移量
// top: 40, // 距离容器上边界40像素
// bottom: 80 // 距离容器下边界30像素
x: 80,
y: 40,
x1: 25,
y2: 80,
},
xAxis: { // x轴相关操作
type: 'category', // 设置为主轴
name: '入炉锰',
},
yAxis: { // y轴相关操作
type: 'value',
name: '总价格',
splitLine: {show: true}, // 去除网格线
min: function (value) {
return value.min - 500
}, // 处理y轴最小值 为数据的最小值相关
max: function (value) {
return value.max + 500
}, // 处理y轴最大值 为数据的最大值相关
},
dataZoom: [ // 数据滑块设置
{
type: 'slider', // 数据滑块 可以滑轮缩放
show: true,
realtime: true, //拖动时，是否实时更新系列的视图
start: 0, // 起始0
end: 100, // 终止100
minSpan: 8,
bottom: '0%',
dataBackground: { // 数据滑块的颜色
lineStyle: {
color: '#5184F7'
},
areaStyle: {
color: '#5184F7',
opacity: 1,
}
},
// fillerColor:'rgba(255,255,255,.6)'
},
],
series: [{
// name: '销量',
type: 'line',
symbolSize: 10, // 设定实心点的大小
// animation: false, // 是否有动画
encode: {
// x: 3,
// y: 10,
x: '入炉锰',
y: '总价格',
// tooltip: ['入炉锰', '总价格'] // 更改 在 tooltip中显示的属性，即鼠标悬浮时的显示
},
markLine: {
symbol: 'circle', // 默认["circle","arrow"] arrow 为两端箭头 circle圆 | rect长方 | roundRect圆长方 | triangle三角 | diamond菱形 | pin大头针 | arrow箭头 | none没有
silent: true, // 可以点击此条警示线
data: [
// {
// xAxis: 1 // 当xAxis为类目轴时，数值1会被理解为类目轴的index，通过xAxis:-1|MAXNUMBER可以让线到达grid边缘
// },
],
lineStyle: {
show: true,
color: '#ff0000', // 线条颜色
width: 2, // 线条宽度 0 的时候可以隐藏线
type: 'dashed'
// type: 'solid' //'dotted'虚线 'solid'实线 'dashed' 小短线
},
label: {
show: true, // 是否展示文字
color: "red",
fontSize: 12 ,
formatter(params) {
return `当前方案：${ params.value + 1 }`;
},
},
},
markPoint: {
symbol:'pin', // ‘circle’圆, ‘rect’方, ‘roundRect’圆角方, ‘triangle’三角, ‘diamond’菱形, ‘pin’默认大头针, ‘arrow’向上指的箭头
// symbol: 'M736 101.3H288c-123.2 0-224 100.8-224 224v149.3c0 123.2 100.8 224 224 224h37.3v224l256-224H736c123.2 0 224-100.8 224-224V325.3c0-123.2-100.8-224-224-224z',
// symbolSize: [70, 70], // 使用pin时容器大小
symbolSize: [30, 30], // 容器大小
// symbolOffset: [0, -30], // 容器位置偏移
data: [],
},
itemStyle: { // 曲线设置
normal: {
color: '#5184F7', // 圆心圈颜色
lineStyle: {
color: '#5184F7'
}
}
},
areaStyle: { // 区域设置
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#5184F7' // 100% 处的颜色
}, {
offset: 1, color: '#ffffff' // 0% 处的颜色
}],
global: false // 缺省为 false
}
},
}],
}
}
}
3. 图表初始化以及事件监听（记得mounted中调用）
getEcharts() {
this.chartLine = echarts.init(document.getElementById('calculateChart'));
// 使用刚指定的配置项和数据显示图表。
this.chartLine.setOption(this.option);
// this.chartLine.getZr().on('click', (params) => { // 只能通过点击折线获取index
this.chartLine.on('click', (params) => { // 折线点击
if (params.componentType === 'markPoint') {
this.isClickMark = true;
if (this.currentPlan !== params.data.xAxis) {
this.getChartData(params.data.xAxis);
this.$parent.changePlanShow(this.currentPlan, 'process'); // 改变父组件
} else {
this.$message.warning('您选择的方案与当前方案相同');
}
}
})
}
4. 更新折线图数据函数
// dataList中包括highPriceLoc最高价 lowPriceLoc最低价 perQuality最贴近 resultList方案数组
getEchartsData() { // 更新折线图样式
this.chartLine.setOption(
{
dataset: {
source: this.resultList, // 更新数据
},
series: [{
markLine: {
data: [{ xAxis: this.currentPlan }], // 当xAxis为类目轴时，数值1会被理解为类目轴的index，通过xAxis:-1|MAXNUMBER可以让线到达grid边缘
},
}]
}
)
},
1891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
