option = { //设置图标标题 title: { text: '折线图' }, //图标提示框组件 tooltip: { //触发方式 axis坐标轴触发 trigger: 'axis' }, //图例组件 legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, //网格配置 grid可以控制线性图 柱状图 图表大小 grid: { //设置 上下左右距离dom容器距离 控制图标大小 left: '3%', right: '4%', bottom: '3%', //是否显示刻度标签 true显示 containLabel: true }, //工具箱组件 toolbox: { feature: { //保存图表为图片 saveAsImage: {} } }, //直角坐标系配置 //设置x轴配置 xAxis: { //type: category显示类目 type: 'category', //是否让线条与坐标轴之间有缝隙 boundaryGap: false, //x轴显示的相关数据 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, //设置y轴配置 yAxis: { type: 'value' //数值 }, // 图表系列配置,决定图表数据怎样显示(柱状、折线、、、等) series: [ { //数据线条名称 //小技巧:series中有name值==> legend的data可以删掉 name: '邮件营销', //数据线条类型 此处line折线 type: 'line', //设置数据堆叠,一般应用不需要 stack: '总量', //线条数据 data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', stack: '总量', //因为数据堆叠 此处数组第一个的 真实数据值应该是120+220=340; data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', //因为数据堆叠 此处数组第一个的 真实数据值应该是120+220+150=490; data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', //因为数据堆叠 此处数组第一个的 真实数据值应该是120+220+150+320=810; data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] } ], //设置数据线条颜色 color:[ 'green','red','pink','black','blue'], };
标签:name,数据,stack,type,options,line,data,Echarts,属性 From: https://www.cnblogs.com/Timeouting-Study/p/16924557.html