这里用一个折线图的数据展开说明
var chartDom = document.getElementById("target");
var myChart = this.$echarts.init(chartDom);
var option;
option = {
//标题组件
title: {
text: "",//标题
},
//提示框组件
tooltip: {
trigger: "axis",//item数据项图形触发,axis坐标轴触发
},
//图例组件,控制哪些系列不显示
legend: {
type:'scroll',//scroll数量较多时可以使用滚动翻页的图例,默认'plain'普通图例
top:'7%',//距头部多远
data: [//头部数据
"基础设施"
],
},
//直角坐标系内绘图网格
grid: {
top:'20%', //grid组件距上下左右的距离
left: "0%",
right: "4%",
bottom: "3%",
containLabel: true,//grid区域是否包含坐标轴的刻度标签。
},
//工具栏
toolbox: {
feature: {//各工具配置项
saveAsImage: {},//保存为图片
},
},
//直角坐标系 grid 中的 x 轴
xAxis: {
type: "category",//坐标轴类型,category类目轴,适用于离散的类目数据
boundaryGap: false,//坐标轴两边留白策略,默认为 true
data: this.data1.arr, //数据
//坐标轴刻度标签的相关设置
axisLabel: {
interval: 0, //横轴信息全部显示
rotate: -45, //倾斜度 -90 至 90 默认为0
margin: 5, //刻度标签与轴线之间的距离
textStyle: {
fontSize: 9, //横轴字体大小
color: "#000000", //颜色
},
},
},
yAxis: {
type: "value",//'value' 数值轴,适用于连续数据。
},
series: [
{
name: "基础设施",//对应的系列
type: "line",
stack: "总量",
data: this.data1.arr2,
}
],
};
option && myChart.setOption(option);
},
},
效果图
最后
如果对您有帮助,希望能给个👍评论收藏三连!
公众号:前端老实人,无偿解答问题哦❤