ECharts的几个基本配置介绍

it2022-12-27  72

option = { //设置图表的标题 title: { text: '折线图堆叠' }, //图表的提示框组件 tooltip: { //触发方式,axis横坐标,item纵坐标(可以在官网文档-配置项手册查看) trigger: 'axis' }, //图例组件 legend: { //如果series里面有name值,那么就可以删掉 legend的data data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, //工具箱组件 可以另存为图片等功能 toolbox: { feature: { saveAsImage: {} } }, //网格配置类似小dom容器,它可以控制图表的大小 grid: { left: '3%', right: '4%', bottom: '3%', //是否显示刻度标签 containLabel: true }, //设置x轴的相关配置 xAxis: { //类目轴 type: 'category', //是否让图表内容和坐标轴有距离,ture是有距离,反之。 boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { //数值轴 type: 'value' }, //系列图表配置,决定显示哪种类型的图表(折线图、柱形图) series: [ //多少个数组就决定有几个对象 { name: '邮件营销', type: 'line', //数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值相加 stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] } ], //color可以设置线条的颜色,注意后面是数组 color:['pink','blurSize','red'] };

最新回复(0)