echarts的多条折线图

最新推荐文章于 2023-09-13 23:02:22 发布

北北bb_

最新推荐文章于 2023-09-13 23:02:22 发布

阅读量554

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/aurora0_/article/details/126854494

版权

本文展示了如何使用echarts库在前端创建一个包含多条折线图的图表。通过设置不同的配置项，如tooltip、legend、grid、xAxis、yAxis以及series，实现了线条颜色、样式、数据的动态加载，并提供了详细的样式调整，如线条宽度、拐点形状和图例样式等。

摘要由CSDN通过智能技术生成

getSocial_Bottom_1() {
var myChart = document.getElementById(‘echarts’); //图标初始化
let echarts = echarts.init(myChart);
var option;
option = {
tooltip: {
trigger: ‘axis’, //一般折线图都用这个属性“坐标轴”
axisPointer: { //鼠标hover上去的点会高亮
lineStyle: {
color: ‘#1EE3F3’ //点的颜色
}
}
},
legend: {//图例属性
icon: ‘rect’,//图例的形状是矩形，还可选circle
itemWidth: 23, //每个图例的宽度
itemHeight: 16,//每个图例的高度
data: this.allLegendName,//图例的数据（后端数据在这里作修改名字）
x: ‘center’,
itemGap: 25,//图例的间距
textStyle: {
fontSize: 22,//图例字体大小
color: ‘#fff’ //图例字体的颜色
}
},
grid: {//网格属性
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
},
xAxis: [{//x轴属性
type: ‘catego