echarts折线图常用配置项总结，标题,提示框,系列,x轴,y轴,下载设置
这里用一个折线图的数据展开说明
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); }, }, 复制代码效果图
最后
如果对您有帮助，希望能给个????评论收藏三连！
博主为人老实，无偿解答问题哦❤
作者：前端老实人
链接：https://juejin.cn/post/7015456420178952222