vue echarts 动态传值更新

效果展示

前言

1. 很多时候需要从后端获取值更新图表，这就涉及到动态更新图表数据；
2. 使用echarts的时候，往往需要x轴和y轴的一一对应数组，比如

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
}]

但是后端传值往往是一个json 串，是对象数组。常见的做法是递归遍历整个对象数组，然后处理好数据放到xy轴数组中
这样有两个比较明显的缺陷：
① 遍历费时费力
② 如果很多图表的数据都来自同一个数据集，只不过取不一样的属性，那么每一个图表都要处理一次数据，会很麻烦且低效
解决方案：

1. 使用动态传值，从而在获得后台数据的时候更新组件
2. 使用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边缘
                            },
                        }]
                    }
                )
            },