请选择 进入手机版 | 继续访问电脑版

ECharts:图表option中的配置详解(通俗易懂)

[复制链接]
奋斗在韩 发表于 2021-1-3 12:17:02 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
以折线堆叠图为例 说明讲授,
跟着每一条设置测试改一改、测一测就可以搞清楚并明确根本设置!
该折线图图测试地点:https://echarts.apache.org/examples/zh/editor.html?c=line-stack

  1. 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'],};
复制代码
日常总结时刻:
跟着链接去测试不难明确每一项设置,
知识和技能是有关系,但同时又是两回事,我们明确了这叫知识
但能不参考任何东西写出来,才是技能
所以一定要多应用和训练
学习这个如此,学习编程也是如此!

来源:https://blog.csdn.net/qq_43137699/article/details/112062015
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )