Echarts-多个数据渲染
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts-多个数据渲染相关的知识，希望对你有一定的参考价值。
参考技术A 1、循环遍历数据ID2、在组件引入 import echarts from 'echarts'
3、 在data里定义roseChart: "roseChart",
4、在methods：获取ID并获取接口数据及调用
//曲线分析图
drawRose ()
var roseCharts = document.getElementsByClassName("roseChart"); // 对应地使用ByClassName
for (var i = 0; i < roseCharts.length; i++) // 通过for循环，在相同class的dom内绘制元素
var myChart = echarts.init(roseCharts[i]);
myChart.setOption(
title:
text: this.list[i].name
,
legend:
data: this.list[i].legend
,
tooltip:
show: true,
transitionDuration: 0,//防止tooltip的抖动
trigger: 'axis',
axisPointer:
type: "cross",
axis: "x"
,
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
,
xAxis: [
data: this.list[i].times,
axisLabel:
interval: 0,
rotate: 40
,
],
yAxis: ,
series: [
name: this.list[i].legend[0],
type: 'line',
data: this.list[i].tdatas,
smooth: true,
showAllSymbol: true,
itemStyle:
normal:
color: 'yellow',
lineStyle:
color: "yellow",
width: 1
,
areaStyle:
color:
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
offset: 0,
color: '#fff' // 0% 处的颜色
,
offset: 1,
color: 'yellow' // 100% 处的颜色
]
,
name: this.list[i].legend[1],
type: 'line',
data: this.list[i].ydatas,
showAllSymbol: true,
smooth: true,
itemStyle:
normal:
color: '#3A84FF',
lineStyle:
color: "#3A84FF",
width: 1
,
areaStyle:
color:
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
offset: 0,
color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
,
offset: 1,
color: '#1fb5fc' // 100% 处的颜色
]
,]
)
5、获取接口并将之赋值到data里面定义的数组
6、watch监听
watch:
list (val)
this.drawRose()
,
7、后台数据格式
ECharts折线图渲染json格式数据（格式为对象）
参考技术A json数据以上是关于Echarts-多个数据渲染的主要内容，如果未能解决你的问题，请参考以下文章
ECharts从后端调用数据后，给ECharts重新渲染数据