ECharts使用总结:属性解释+修改+效果展示+多个图表切换
原文出处:https://blog.csdn.net/webFront/article/details/79159534
最近做统计图表使用的是echarts插件,简单解释一下用到的每个配置项是干什么用的,以及效果展示在什么位置;
实现了多个图表切换的功能;
本人是入门级小白,有什么错误的地方请大神指示,最全最详细的解释还是去看官网的配置吧!配置项都在这里了http://echarts.baidu.com/option.html#title,
function weekSumShow (){ var option = { tooltip: {//提示框组件 trigger: 'axis'//触发类型,可选:'axis',坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。'item',数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'none',什么都不触发。 }, toolbox: {//工具栏,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。 feature: {//各工具配置项。 dataView: {//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。 show: true,//是否显示组件。 readOnly: false }, magicType:{//动态类型切换 示例:feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}} show:true, type:['line','bar'] }, restore: {//配置项还原。 show: true }, saveAsImage: {//保存为图片。 show: true } } }, grid: {//直角坐标系内绘图网格 containLabel: true//grid 区域是否包含坐标轴的刻度标签。 }, legend: {//图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。 data: ['累计活动数','新增活动数']//图例的数据数组。 }, dataZoom: {//dataZoom 组件 用于区域缩放,从而能*关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。 type: 'slider',//滑动条型数据区域缩放组件 start:0,//起始位置0 end: 100//结束位置100 }, xAxis: [{//直角坐标系 grid 中的 x 轴 type: 'category',//坐标轴类型。'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。 name:'周数',//坐标轴名称。 axisTick: {//坐标轴刻度相关设置。 alignWithLabel: true//类目轴为true 的时候有效,可以保证刻度线和标签对齐; }, data:x//类目数据,在类目轴(type: 'category')中有效。 }], yAxis: [{//直角坐标系 grid 中的 y 轴 type: 'value',//坐标轴类型。'value' 数值轴,适用于连续数据。 name: '数量'//坐标轴名称。 }], series: [{//系列列表。每个系列通过 type 决定自己的图表类型 name: '累计活动数',//系列名称,用于tooltip的显示,legend 的图例筛选, type: 'line',//系列类型 stack: '总量',//数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。 yAxisIndex:0,//使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。 data: sumArray//二位数组,sumArray[i]表示在这一个坐标里有多少个柱状图,sumArray[i]里的数组长度表示X轴有多少坐标(这是我自己使用看到的效果,文档里还有别的用法) }, { name: '新增活动数', type: 'bar', animation: true, yAxisIndex:0, data: allWeekArray }] }; myChart.setOption(option); }
$(".tabToggle").click(function () { myChart.clear(); switch( parseInt($(this).val())) { case 0 : weekShow(); break; case 1 : weekSumShow(); break; case 2 : monthShow(); break; case 3 : monthSumShow(); break; } });
最近做统计图表使用的是echarts插件,简单解释一下用到的每个配置项是干什么用的,以及效果展示在什么位置;
实现了多个图表切换的功能;
本人是入门级小白,有什么错误的地方请大神指示,最全最详细的解释还是去看官网的配置吧!配置项都在这里了http://echarts.baidu.com/option.html#title,
function weekSumShow (){ var option = { tooltip: {//提示框组件 trigger: 'axis'//触发类型,可选:'axis',坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。'item',数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'none',什么都不触发。 }, toolbox: {//工具栏,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。 feature: {//各工具配置项。 dataView: {//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。 show: true,//是否显示组件。 readOnly: false }, magicType:{//动态类型切换 示例:feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}} show:true, type:['line','bar'] }, restore: {//配置项还原。 show: true }, saveAsImage: {//保存为图片。 show: true } } }, grid: {//直角坐标系内绘图网格 containLabel: true//grid 区域是否包含坐标轴的刻度标签。 }, legend: {//图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。 data: ['累计活动数','新增活动数']//图例的数据数组。 }, dataZoom: {//dataZoom 组件 用于区域缩放,从而能*关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。 type: 'slider',//滑动条型数据区域缩放组件 start:0,//起始位置0 end: 100//结束位置100 }, xAxis: [{//直角坐标系 grid 中的 x 轴 type: 'category',//坐标轴类型。'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。 name:'周数',//坐标轴名称。 axisTick: {//坐标轴刻度相关设置。 alignWithLabel: true//类目轴为true 的时候有效,可以保证刻度线和标签对齐; }, data:x//类目数据,在类目轴(type: 'category')中有效。 }], yAxis: [{//直角坐标系 grid 中的 y 轴 type: 'value',//坐标轴类型。'value' 数值轴,适用于连续数据。 name: '数量'//坐标轴名称。 }], series: [{//系列列表。每个系列通过 type 决定自己的图表类型 name: '累计活动数',//系列名称,用于tooltip的显示,legend 的图例筛选, type: 'line',//系列类型 stack: '总量',//数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。 yAxisIndex:0,//使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。 data: sumArray//二位数组,sumArray[i]表示在这一个坐标里有多少个柱状图,sumArray[i]里的数组长度表示X轴有多少坐标(这是我自己使用看到的效果,文档里还有别的用法) }, { name: '新增活动数', type: 'bar', animation: true, yAxisIndex:0, data: allWeekArray }] }; myChart.setOption(option); }
$(".tabToggle").click(function () { myChart.clear(); switch( parseInt($(this).val())) { case 0 : weekShow(); break; case 1 : weekSumShow(); break; case 2 : monthShow(); break; case 3 : monthSumShow(); break; } });