Vue使用Echarts——Ajax软件系统定制开发异步获取数据赋值给Echarts
软件系统定制开发我们在实际开发的过程中，软件系统定制开发经常使用到动态的数据来给到Echarts赋值，软件系统定制开发本贴就来描述在Vue中如何给Echarts赋值。
如下图所示，数据是动态生成的。
lineOption: { title: { text: '工业产值统计环比图' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' }, } }, //去除边距 grid:{ bottom:"30px" }, toolbox: { feature: { dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, saveAsImage: { show: true } }, }, legend: { data: ['产值（千元）', '环比上一个月比值 %'] }, xAxis: [ { type: 'category', data: [], axisPointer: { type: 'shadow', }, axisLabel: { formatter: '{value}月' } } ], yAxis: [ { type: 'value', name: '产值（千元）', axisLabel: { formatter: '{value} 千元' } }, { type: 'value', name: '比值 %', axisLabel: { formatter: '{value} %' } } ], series: [ { name: '产值（千元）', type: 'bar', tooltip: { valueFormatter: function (value) { return value + '千元'; } }, data: [], }, { name: '环比上一个月比值 %', type: 'line', yAxisIndex: 1, tooltip: { valueFormatter: function (value) { return value + '%'; }, }, formatter: '{value} %', data: [], } ] },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
其中我们进行数据赋值的大部分都是data数组所以我们查询的结果也要是类似的数组
方法一：在data后面跟上有数据的数组（在vue的动态数据中可能会失效）,因为vue存在对数组的监听，二者会导致我们不能直接赋值
{ name: '环比上一个月比值 %', type: 'line', yAxisIndex: 1, tooltip: { valueFormatter: function (value) { return value + '%'; }, }, formatter: '{value} %', data: this.redData.rateDate, }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
**方法二：**在ajax查询到数据的时候，给echart赋值，如下面展示的代码一样
this.axios({ method: "POST", url: "你的请求地址", data:{},//你的请求参数，没有就不写 }).then((res) => { let code = res.data.code; if (code == 200) { //给echart折线图/饼图赋值 //环比图相关 this.lineOption.series[0].data = res.data.data.outputValueCountThisYear.data; this.lineOption.xAxis[0].data = res.data.data.outputValueCountThisYear.Month; this.lineOption.series[1].data = res.data.data.yearOverYearRate; } }).catch((error) => { console.log(error); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
注意，ehcart的赋值，要精确的找到对应的待赋值的内容。
this.lineOption.series[0].data = res.data.data.outputValueCountThisYear.data;- 1
由于，该项目是在vue的基础上，前文也提到了，有关echarts的属性内容是的data的return内的，所以通过this.名字可以获取，后面的series[0].data表示series属性的第一个元素的data属性。
**弊端：**采用这样赋值的方式，可以把我们获取的数据，给到echarts，都是如果使用了，echarts自带的restore刷新数据的时候，会把动态生成的数据变成一开始echarts初始化的数据。
这样的原因是因为，我们要么在的时候，或者动态生成的时候，才会调用ajax来获取数据，并且赋值给echarts，使用官方的echarts的时候，echarts初始化了，变成了原来默认（静态）的数据，就会是一片空白（如果你的默认数据是空的话）
解决思路：隐藏官方提供的restore按钮，自己重写一个刷新图表的icon图表，即可
toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, //restore: { show: true }, saveAsImage: { show: true }, myTool1: { show: true, title: "还原", icon: "path://M512 981.333333c-209.866667 0-396.693333-126.026667-466.293333-314.08a35.52 35.52 0 0 1 23.626666-44.426666 38.613333 38.613333 0 0 1 48 20.693333c58.666667 158.933333 217.013333 265.493333 394.666667 265.6s336-106.666667 394.666667-266.133333a37.6 37.6 0 0 1 28.853333-23.626667 38.986667 38.986667 0 0 1 35.786667 11.946667 34.773333 34.773333 0 0 1 7.146666 35.36c-69.386667 188.373333-256.48 314.666667-466.453333 314.666666z m431.36-574.08a37.92 37.92 0 0 1-35.946667-24.266666C849.386667 222.56 690.613333 114.88 512 114.72S174.72 222.346667 116.746667 382.773333A38.72 38.72 0 0 1 69.333333 403.733333a35.786667 35.786667 0 0 1-24.106666-44.373333C113.333333 169.866667 301.013333 42.666667 512 42.666667s398.666667 127.306667 467.146667 316.96a34.56 34.56 0 0 1-4.906667 32.64 38.933333 38.933333 0 0 1-30.88 14.986666z", onclick: () => { this.generateChart();//调用你的图表数据获取函数 }, }, } },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20