ECharts:图表option中的配置详解（通俗易懂）

以折线堆叠图为例 说明讲授，
跟着每一条设置测试改一改、测一测就可以搞清楚并明确根本设置!
该折线图图测试地点：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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！