SmartBi各类图形及其echarts的js代码
一:柱图
1:普通柱图
{
"color": ["#62a9ff"],
"grid": {
"left": "46px",
"bottom": "66px",
"right": "16px",
"top": "46px"
},
//柱子宽度设置
"barMaxWidth": "16px",
"xAxis": {
"axisPointer": {
"show": "true",
"type": "shadow",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"nameTextStyle": {
"color": "#bfbfbf"
},
"label": {
"color": "#898989"
}
},
//名字设置
"name": "",
//坐标轴设置
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
//坐标轴标签设置
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"rotate": "45", //设置角度
"color": "#bfbfbf",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"yAxis": {
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"color": "#bfbfbf",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"series": [{
"type": "bar",
//设置柱子宽度
"barWidth": "16px",
"itemStyle": {
"normal": {
"barBorderRadius": [8, 8, 0, 0]
}
},
//设置显示最大值和最小值标签
"markPoint": {
"data": [{
"type": "max",
"name": "最大值"
}, {
"type": "min",
"name": "最小值"
}]
}
}]
}
2:分组柱图
{
"color": ["#62a9ff", "#c098ed"],
"grid": {
"left": "46px",
"bottom": "66px",
"right": "16px",
"top": "46px"
},
"barMaxWidth": "16px",
"xAxis": {
"name": "",
"axisPointer": {
"show": "true",
"type": "shadow",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"nameTextStyle": {
"color": "#bfbfbf"
},
"label": {
"color": "#898989"
}
},
"name": "",
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"rotate": "45",
"color": "#bfbfbf",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"yAxis": {
"name": "万",
"nameTextStyle": {
"color": "#bfbfbf",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"color": "#bfbfbf",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"legend": {
"show": "ture", //图例显示
"orient": "horizontal", //图例布局朝向,vertical竖向排版,horizontal横向
"align": "left", //图例对齐方式
"right": "16px", //图例距右侧距离
"top": "8px", //图例距顶部距离
//"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12px",
"lineHeight": "20px"
} //图例文字样式
},
"series": [{
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [8, 8, 0, 0]
}
}
}, {
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [8, 8, 0, 0]
}
},
"barGap": "0%" //设置柱子之间的距离
}]
}
3:堆叠柱图
{
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
//设置内容边距
"grid": {
"left": "46px",
"bottom": "80px",
"right": "16px",
"top": "46px"
},
"xAxis": {
"name": "",
"axisPointer": {
"show": "true",
"type": "shadow",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#898989"
}
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"rotate": "45", // 字体的角度
"textStyle": {
"color": "#bfbfbf"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"yAxis": {
"name": "万",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"textStyle": {
"color": "#bfbfbf"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
//设置柱子宽度
"barMaxWidth": "16px",
"legend": {
"show": "ture", //图例显示
"orient": "horizontal", //图例布局朝向,vertical竖向排版,horizontal横向
"align": "left", //图例对齐方式
"right": "16px", //图例距右侧距离
"top": "8px", //图例距顶部距离
//"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12px",
"lineHeight": "20px"
} //图例文字样式
},
"series": [{
"stack": "check", // 数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放
"itemStyle": {
"normal": {
"barBorderRadius": [0, 0, 0, 0]
}
}
}, {
"stack": "check", // 数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
"itemStyle": {
"normal": {
"barBorderRadius": [8, 8, 0, 0]
}
}
}]
/*"dataZoom": {
"type": "slider"
}*/
}
4:一般条形柱图
{
"color": ["#62a9ff" /*, "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"*/ ], //循环用色
"grid": {
"left": "90px",
"bottom": "16px",
"right": "96px",
"top": "16px"
},
"xAxis": {
"show": false,
"axisLine": {
"lineStyle": {
"color": "#ffffff"
}
},
"axisLabel": {
"show": false
}
},
"yAxis": {
"name": "",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisPointer": {
"show": "true",
"type": "shadow",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#bfbfbf"
}
},
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#424e67"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"barMaxWidth": "16px",
"label": {
"show": "true",
"position": "right"
},
//此处的label删除后,则每个柱子后面的数据可以隐藏
"series": [{
"itemStyle": {
"normal": {
"barBorderRadius": [0, 8, 8, 0]
},
"tooltip": {
"show": "true",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
}
}],
"dataZoom": {
"show": "true",
"type": "inside",
"orient": "vertical",
//"start": "100", //“10”表示百分比
//"end": "0" //“80”表示百分比
}
//dataZoom主要设置显示在条形图右侧的数据区域缩放条,可以全部去掉
}
{
"color": ["#62a9ff" /*, "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"*/ ], //循环用色
"grid": {
"left": "90px",
"bottom": "16px",
"right": "96px",
"top": "16px"
},
"xAxis": {
"show": false,
"axisLine": {
"lineStyle": {
"color": "#ffffff"
}
},
"axisLabel": {
"show": false
}
},
"yAxis": {
"name": "",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisPointer": {
"show": "true",
"type": "shadow",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#bfbfbf"
}
},
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#424e67"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"barMaxWidth": "16px",
"label": {
"show": "true",
"position": "right"
},
// "series": [{
// "itemStyle": {
// "normal": {
// "barBorderRadius": [0, 8, 8, 0]
// },
// "tooltip": {
// "show": "true",
// //设置字体系列:温软雅黑
// "fontfamily": "Microsoft YaHei",
// //设置字体大小
// "fontsize": "12px"
// }
// }
// }],
// "tooltip": {
// // "formatter": "function(a){ debugger;return a.seriesName+'</br>'+a.name+'</br>'+a.data.value[0]+'万元'}"
// "formatter": "function(a){ debugger;return a.name+'</br>'+a.data.value[0]+'万元'}"
// },
"series": [{
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [0, 8, 8, 0],
"color": "#62a9ff",
"label": {
"show": true,
"textStyle": {
"color": "#62a9ff"
},
"formatter": "function(a){ debugger;return a.data.value[0]+'万元'}", //d后面加单位
"position": "right" //设置居上
}
}
},
"tooltip": {
// "formatter": "function(a){ debugger;return a.seriesName+'</br>'+a.name+'</br>'+a.data.value[0]+'万元'}"
"formatter": "function(a){ debugger;return a.name+'</br>'+a.data.value[0]+'万元'}"
}
}],
//此处对series的更改可以让他的柱子显示万元这个单位。
"dataZoom": {
"show": "true",
"type": "inside",
"orient": "vertical"
//"start": "100", //“10”表示百分比
//"end": "0" //“80”表示百分比
}
}
5:分组条形柱图
图例位置直接在设置处勾选即可。
{
"color": ["#62a9ff" /*, "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"*/ ], //循环用色
"grid": {
"left": "90px",
"bottom": "16px",
"right": "50px",
"top": "16px"
},
"xAxis": {
"show": false,
"axisLine": {
"lineStyle": {
"color": "#ffffff"
}
},
"axisLabel": {
"show": false
}
},
"yAxis": {
"name": "",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisPointer": {
"show": "true",
"type": "shadow",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#bfbfbf"
}
},
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#424e67"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"barMaxWidth": "16px",
/*"label": {
"show": "true",
//"formatter": "{c}S万",
"position": "right"
},*/
"series": [{
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [0, 8, 8, 0]
}
}
}, {
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [0, 8, 8, 0]
}
},
"barGap": "0%" //设置柱子之间的距离
}],
"dataZoom": {
"show": "true",
"type": "inside",
"orient": "vertical",
//"start": "100", //“10”表示百分比
//"end": "0" //“80”表示百分比
}
}
6:堆叠条形柱图
图例位置直接在设置处勾选即可。
{
"color": ["#62a9ff", "#c098ed" /*, "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"*/ ], //循环用色
"grid": {
"left": "90px",
"bottom": "16px",
"right": "96px",
"top": "16px"
},
"xAxis": {
"axisLine": {
"lineStyle": {
"color": "#ffffff"
}
},
"axisLabel": {
"show": false
}
},
"yAxis": {
"name": "",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisPointer": {
"show": "true",
"type": "shadow",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#bfbfbf"
}
},
"axisLabel": {
//设置轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#bfbfbf"
}
}
},
//"barWidth": "16px",
"barMaxWidth": "16px",
"series": [{
"stack": "check", // 数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放
"itemStyle": {
"normal": {
"barBorderRadius": [0, 0, 0, 0]
}
}
}, {
"stack": "check", // 数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
"itemStyle": {
"normal": {
"barBorderRadius": [0, 8, 8, 0]
}
}
}],
//"dataZoom": {
// "show": "true",
// "type": "slider",
// "orient": "vertical",
// "start": "100", //“10”表示百分比
// "end": "20" //“80”表示百分比
//}
}
7:双向条形柱图
注意:创建数据集时需要将男士人数设置为负数。
{
"grid": {
"top": "56px",
"bottom": "48px",
"left": "72px",
"right": "72px"
},
"color": ["#62a9ff", "#fb7293"], //循环用色
"legend": {
"show": "true",
"left": "center",
"top": "16px",
"orient": "horizontal",
"align": "left"
},
"xAxis": [{
"name": "",
"type": "value",
"axisLabel": {
"formatter": "function(data) {return (Math.abs(data));}"
}
}],
"yAxis": {
"name": "",
"type": "category",
"axisLabel": {
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
},
},
"series": [{
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [8, 0, 0, 8]
}
}
}, {
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [0, 8, 8, 0]
}
},
"barGap": "-100%" //设置柱子之间的距离,实现柱子合并效果
}],
//横向条状宽度
"barWidth": "16px",
// X坐标条负值转正值
"tooltip": {
"trigger": "axis",
"axisPointer": { // 坐标轴指示器,坐标轴触发有效
"type": "" // 默认为直线,可选为:'line' | 'shadow'
},
"formatter": "function(params) { return params[0].seriesName + ' : ' + Math.abs(params[0].value[0]);}"
},
// X坐标刻度负值转正值
}
8:极坐标柱图
普通柱图通过echarts的js代码变化而得,绘图时,选择得是普通柱图,加上下面js代码即可。
{
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9"], //循环用色
//不显示y轴
"yAxis": {
"show": false
},
//不显示x轴
"xAxis": {
"show": false
},
"radiusAxis": {
//"data": [],
"data": ['死亡', '其他', '未愈', '好转', '治愈'],
// 不显示上面的横线,极坐标系的径向轴
// "axisLine": {
// "show": false
// },
"axisLabel": {
"interval": 0,
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9"],
"fontSize": 12,
}
},
//显示极坐标系的角度轴
"angleAxis": {
"show": true
},
"series": [{
//类型为柱图
"type": "bar",
"barWidth": "10px",
roundCap: true,
"itemStyle": {
"normal": {
"barBorderRadius": [5, 5, 5, 5]
}
},
//转换为极坐标
"coordinateSystem": "polar"
}],
"polar": {},
}
二:折线图
1:单条折线图
{
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
//设置内容边距
"grid": {
"left": "46px",
"bottom": "66px",
"right": "16px",
"top": "46px"
},
"xAxis": {
//设置坐标轴名称
"name": "",
//设置坐标轴
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
//坐标轴标签设置
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
//"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#bfbfbf"
},
"rotate": "45", //设置角度
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
"axisPointer": {
"show": "true",
"type": "line",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#898989"
}
}
},
"yAxis": {
"name": "人",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"textStyle": {
"color": "#bfbfbf"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
//"toolbox": {},
/*"legend": {
"show": "ture", //图例显示
"orient": "horizontal", //图例布局朝向,vertical竖向排版,horizontal横向
"align": "left", //图例对齐方式
"right": "16px", //图例距右侧距离
"top": "8px", //图例距顶部距离
//"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12px",
"lineHeight": "20px"
} //图例文字样式
},*/
"series": [{
"type": "line",
"smooth": "true"
}, {
"type": "line",
"smooth": "true"
}, {
"type": "line",
"smooth": "true"
}]
}
2:多条折线图
{
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
//设置内容边距
"grid": {
"left": "46px",
"bottom": "66px",
"right": "16px",
"top": "46px"
},
"xAxis": {
//设置坐标轴名称
"name": "",
//设置坐标轴
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
//坐标轴标签设置
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
//"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#bfbfbf"
},
"rotate": "45", //设置角度
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
"axisPointer": {
"show": "true",
"type": "line",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#898989"
}
}
},
"yAxis": {
"name": "人",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"textStyle": {
"color": "#bfbfbf"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
//"toolbox": {},
"legend": {
"show": "ture", //图例显示
"orient": "horizontal", //图例布局朝向,vertical竖向排版,horizontal横向
"align": "left", //图例对齐方式
"right": "16px", //图例距右侧距离
"top": "8px", //图例距顶部距离
//"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12px",
"lineHeight": "20px"
} //图例文字样式
},
"series": [{
"type": "line",
"smooth": "true"
}, {
"type": "line",
"smooth": "true"
}, {
"type": "line",
"smooth": "true"
}]
}
3:堆叠折线图
{
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
//设置内容边距
"grid": {
"left": "46px",
"bottom": "66px",
"right": "16px",
"top": "46px"
},
"xAxis": {
//设置坐标轴名称
"name": "",
//设置坐标轴
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
//坐标轴标签设置
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
//"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#bfbfbf"
},
"rotate": "45", //设置角度
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
"axisPointer": {
"show": "true",
"type": "line",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#898989"
}
}
},
"yAxis": {
"name": "人",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"textStyle": {
"color": "#bfbfbf"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
//"toolbox": {},
"legend": {
"show": "ture", //图例显示
"orient": "horizontal", //图例布局朝向,vertical竖向排版,horizontal横向
"align": "left", //图例对齐方式
"right": "16px", //图例距右侧距离
"top": "8px", //图例距顶部距离
//"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12px",
"lineHeight": "20px"
} //图例文字样式
},
"series": [{
"type": "line",
"smooth": "true"
}, {
"type": "line",
"smooth": "true"
}, {
"type": "line",
"smooth": "true"
}]
}
4:面积折线图
{
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
//设置内容边距
"grid": {
"left": "46px",
"bottom": "66px",
"right": "16px",
"top": "46px"
},
"xAxis": {
//设置坐标轴名称
"name": "",
//设置坐标轴
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
//坐标轴标签设置
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
//"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#bfbfbf"
},
"rotate": "45", //设置角度
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
"axisPointer": {
"show": "true",
"type": "line",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#898989"
}
}
},
"yAxis": {
"name": "人",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"textStyle": {
"color": "#bfbfbf"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
//"toolbox": {},
"legend": {
"show": "ture", //图例显示
"orient": "horizontal", //图例布局朝向,vertical竖向排版,horizontal横向
"align": "left", //图例对齐方式
"right": "16px", //图例距右侧距离
"top": "8px", //图例距顶部距离
//"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12px",
"lineHeight": "20px"
} //图例文字样式
},
"series": [{
"type": "line",
"smooth": "true"
}, {
"type": "line",
"smooth": "true"
}, {
"type": "line",
"smooth": "true"
}]
}
5:折线图与普通柱图组合
{
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
//内容距离设置
"grid": {
"left": "60px",
"bottom": "64px",
"right": "46px",
"top": "40px"
},
"legend": {
"show": "ture", //图例显示
"orient": "horizontal", //图例布局朝向,vertical竖向排版,horizontal横向
"align": "left", //图例对齐方式
"right": "center", //图例距右侧距离
"top": "8px", //图例距顶部距离
//"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12px",
"lineHeight": "20px"
} //图例文字样式
},
"xAxis": {
"name": "",
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#bfbfbf"
},
"rotate": "45", //设置角度
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
"axisPointer": {
"show": "true",
"type": "shadow",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#898989"
}
}
},
"yAxisleft": {
"name": "人",
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"color": "#bfbfbf"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px",
"type": 'value',
//获取最小值并实现向上取整
"min": '0',
//获取最大值并实现向下取整
"max": 'function(value){ return Math.ceil(value.max); }',
"splitNumber": 5
//将Y轴分成5段
},
"yAxisright": {
"name": "%",
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"color": "#bfbfbf"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px",
"type": 'value',
//获取最小值并实现向上取整
"min": '0',
//获取最大值并实现向下取整
"max": 'function(value){ return Math.ceil(value.max); }',
"splitNumber": 5
},
"barMaxWidth": "16",
"series": [{
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [8, 8, 0, 0]
}
}
}, {
"type": "line",
"smooth": "true"
}, {
"type": "line",
"smooth": "true"
}]
}
6:折线图与双向柱图组合
创建数据集时,诊中人次为负数。
{
"tooltip": {
//"trigger": 'axis',
//"formatter": "{b0}<br />{a0}: {c0}<br />{a1}:{c1}<br />{a2}:{c2}"
"trigger": 'item',
"formatter": "function(params){return params.seriesName+': '+Math.abs(params.value[1])}" //鼠标提示数据标签
},
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
"grid": {
"left": "60px",
"bottom": "64px",
"right": "46px",
"top": "40px"
},
"legend": {
"show": "ture", //图例显示
"orient": "horizontal", //图例布局朝向,vertical竖向排版,horizontal横向
"align": "left", //图例对齐方式
"right": "center", //图例距右侧距离
"top": "8px", //图例距顶部距离
"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12px",
"lineHeight": "20px"
} //图例文字样式
},
//"tooltip": {
//"trigger": "item",
// "formatter": "function (data) {return (Math.abs(data))}"
//},
"xAxis": {
"name": "",
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
//"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#bfbfbf"
},
"rotate": "45"
},
"axisPointer": {
"show": "true",
"type": "shadow",
"shadowStyle": {
"color": "rgba(0, 138, 255, 0.05)"
},
"label": {
"color": "#898989"
}
}
},
"yAxis": [{
"name": "人",
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"color": "#bfbfbf",
//负坐标轴显示正数与正坐标轴对称
"formatter": "function (data) {return (Math.abs(data))}"
}
}, {
"nameTextStyle": {
"color": "#bfbfbf"
},
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
}
},
"axisLabel": {
"color": "#bfbfbf"
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : -{c} 人 "
}
}],
"barWidth": "16",
"series": [{
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [8, 8, 0, 0]
}
}
}, {
"type": "bar",
"itemStyle": {
"normal": {
"barBorderRadius": [0, 0, 8, 8]
}
},
"barGap": "-100%" //设置柱子之间的距离,实现柱子合并效果
}, {
"type": "line",
"smooth": "true"
}]
}
三:饼图
1:图例在右侧的一般饼图
{
"legend": {
"show": "ture", //图例显示
"orient": "vertical", //图例布局朝向,vertical竖向排版
"align": "left", //图例对齐方式
"right": "16px", //图例距右侧距离16像素
"top": "center", //图例距顶部上下居中
"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12",
"lineHeight": "20"
}, //图例文字样式
//"type": "scroll",让图例可以滚动翻页
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"tooltip": {
"show": "true"
}
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} 人 ({d}%)",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
//设置饼图鼠标移到到某个类别块,那个块会变大且显示相应的数字及占比
"color": [
"#62a9ff",
"#c098ed",
"#eebc23",
"#c3e14c",
"#53cee9",
"#8378ea",
"#67e0e3",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e062ae",
"#e690d1",
"#e7bcf3"
],
"grid": {
"left": 80,
"right": 80,
"top": 16,
"bottom": 18
},
"series": [{
"radius": ["0%", "50%"],
//设置饼图的半径,控制饼图大小,若前面不等于0则会变成环饼图
"center": [
"40%",
"50%"
],
"label": {
"normal": {
"show": "true",
"position": "outside",
"formatter": "{b} :\n {c} 人 ({d}%)",
//"formatter": "{d}%",替换上面那句则引用的标柱之有占比的百分数形式
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
//这里的label用于设置箭头引出的标柱,注释label则不会有引出的标柱
"labelLine": {
"normal": {
"show": "true"
}
}
}],
"roseType": ""
}
2:图例在下方的一般饼图
{
"legend": {
"show": "ture", //图例显示
"orient": "horizontal", //图例布局朝向,vertical竖向排版
"align": "left", //图例对齐方式
"left": "center", //图例距右侧距离16像素
"bottom": "1px", //图例距顶部上下居中
"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12",
"lineHeight": "20"
}, //图例文字样式
"type": "scroll",
//功能:图例滚动翻页
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"tooltip": {
"show": "true"
}
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} 人 ({d}%)",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
"color": [
"#62a9ff",
"#c098ed",
"#eebc23",
"#c3e14c",
"#53cee9",
"#8378ea",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e062ae",
"#e690d1",
"#e7bcf3"
],
"grid": {
"left": 80,
"right": 80,
"top": 16,
"bottom": 18
},
"series": [{
"center": [
"50%",
"50%"
],
//控制大小
"radius": ["0%", "60%"],
"label": {
"normal": {
"show": "true",
"position": "outside",
"formatter": "{d}%",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
//控制引出标柱
"labelLine": {
"normal": {
"show": "true"
}
}
}],
"roseType": ""
}
3:环饼图
{
"legend": {
"show": "ture", //图例显示
"orient": "vertical", //图例布局朝向,vertical竖向排版
"align": "left", //图例对齐方式
"right": "16px", //图例距右侧距离16像素
"top": "center", //图例距顶部上下居中
"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12",
"lineHeight": "20"
}, //图例文字样式
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"tooltip": {
"show": "true"
}
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} 人 ({d}%)",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
//设置饼图鼠标移到到某个类别块,那个块会变大且显示相应的数字及占比
"color": [
"#62a9ff",
"#c098ed",
"#eebc23",
"#c3e14c",
"#53cee9",
"#8378ea",
"#67e0e3",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e062ae",
"#e690d1",
"#e7bcf3"
],
"grid": {
"left": 80,
"right": 80,
"top": 16,
"bottom": 18
},
"series": [{
"center": [
"40%",
"50%"
],
"radius": ['50%', '70%'],
//设置饼图的半径,控制饼图大小,前面的数字控制内环半径,后面那个数字控制外环半径
"label": {
"normal": {
"show": "true",
"position": "outside",
"formatter": "{b} :\n {c} 人 ({d}%)",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
//这里的label用于设置箭头引出的标柱,注释label则不会有引出的标柱
"labelLine": {
"normal": {
"show": "true"
}
}
}],
"roseType": ""
}
4:南丁格尔玫瑰图
{
"legend": {
"show": "ture", //图例显示
"orient": "vertical", //图例布局朝向,vertical竖向排版
"align": "left", //图例对齐方式
"right": "16px", //图例距右侧距离16像素
"top": "center", //图例距顶部上下居中
"icon": "circle", //图例图标圆形
"textStyle": {
"color": "#424e67",
"fontStyle": "normal",
"fontWight": "normal",
"fontFamily": "微软雅黑",
"fontSize": "12",
"lineHeight": "20"
}, //图例文字样式
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"tooltip": {
"show": "true"
}
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} 人 ({d}%)",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
"color": [
"#62a9ff",
"#c098ed",
"#eebc23",
"#c3e14c",
"#53cee9",
"#8378ea",
"#67e0e3",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e062ae",
"#e690d1",
"#e7bcf3"
],
"grid": {
"left": 80,
"right": 80,
"top": 16,
"bottom": 18
},
"series": [{
"center": [
"40%",
"50%"
],
//"radius": ['50%', '70%'],
"label": {
"normal": {
"show": "true",
"position": "outside",
"formatter": "{b} :\n {c} 人 ({d}%)",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"labelLine": {
"normal": {
"show": "true"
}
}
}],
"roseType": ""
}
四:雷达图
{
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3", "#8378ea"], //循环用色
"legend": [{
"orient": "vertical",
"show": "true",
"align": "left",
"top": "center",
"right": "32px",
"icon": "circle", //图例图标圆形
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px",
"textStyle": {
"color": "#424e67"
}
}],
"tooltip": {
"trigger": "item",
"color": "#bfbfbf",
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
"grid": {
"left": 16,
"right": 20,
"top": 16,
"bottom": 18
},
"center": ["40%", "50%"],
"name": {
"show": "true",
"color": "#424e67",
"fontSize": "12px"
}
}
五:散点图
{
"color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3", "#8378ea"], //循环用色
"grid": {
"left": "48px",
"bottom": "66px",
"right": "80px",
"top": "48px"
},
"xAxis": {
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
//坐标轴标签设置
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#bfbfbf"
},
"rotate": "45", //设置角度
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
},
"yAxis": {
"axisLine": {
"lineStyle": {
"color": "#f2f2f2"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
},
//坐标轴标签设置
"axisLabel": {
//设置X轴标签文字最多显示5个文字,大于5个文字时显示前5个文字+...
//"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
"textStyle": {
"color": "#bfbfbf"
},
//设置字体系列:温软雅黑
"fontfamily": "Microsoft YaHei",
//设置字体大小
"fontsize": "12px"
}
}
}
六:仪表盘
1:270°仪表盘
{
"tooltip": {
"formatter": '{a} : {c}%'
},
"series": [{
"type": "gauge",
"radius": "80%",
//设置圆的半径大小。
"center": ["50%", "50%"],
//设置中心在图框的位置,此居中。
"axisLine": {
"lineStyle": {
"width": 10,
"color": [
[
"0.33", "#62a9ff"
],
[
"0.66", "#eebc23"
],
[
"1", "#fb7293"
]
]
}
},
"axisLabel": {
"formatter": '{value} %'
}, //仪表盘轴线
"splitLine": {
"length": "10",
"lineStyle": {
"color": "#ffffff",
}
}, //仪表盘分割线
"axisTick": {
"length": "4"
}, //仪表盘刻度
"min": "0",
"max": "1",
"pointer": {
"length": "60%",
"width": "4"
}, //仪表盘指针,设置最小和最大显示多少,如下最大显示100%,如数据非百分数格式而是数字则max为100
"title": {
"show": true,
//"offsetCenter": ["0", "90%"],
"color": "#898989",
"fontSize": "14"
}, //仪表盘标题
"detail": {
"fontSize": "12",
"formatter": "签约率 \n {value}%"
}, //此处detail的fontSize用于设置标柱数字字体大小,formatter是拼接其含义与标柱数字,若只保留后面的{value}%则只显示标柱数字。
"data": [{
"name": false
}]
}]
}
2:180°仪表盘
{
"series": [{
"startAngle": "180", //开始角度
"endAngle": "0", //结束角度
"type": "gauge",
"radius": "95%",
//设置圆的半径大小。
"center": ["50%", "70%"],
//设置中心在图框的位置,此横向居中,纵向略向下。
"axisLine": {
"lineStyle": {
"width": "10",
"color": [
[
"0.33", "#62a9ff"
],
[
"0.66", "#eebc23"
],
[
"1", "#fb7293"
]
]
}
}, //仪表盘轴线
"splitLine": {
"length": "10",
"lineStyle": {
"color": "#ffffff",
}
}, //仪表盘分割线
"axisTick": {
"length": "4"
}, //仪表盘刻度
"min": "0",
"max": "0.5",
"pointer": {
"length": "60%",
"width": "4"
}, //仪表盘指针,设置最小和最大显示多少,如下最大显示50%,如数据非百分数格式而是数字则max为50
"title": {
"show": false,
//"offsetCenter": ["0", "90%"],
"color": "#898989",
"fontSize": "14"
}, //仪表盘标题
"detail": {
"fontSize": "30",
"backgroundColor": "#ffffff",
"offsetCenter": ["0", "0"],
} //仪表盘指示值,此处detail中的fontSize设置标柱数字的大小
}]
}
3:360°仪表盘
{
"series": [{
"startAngle": "269.9", //开始角度
"endAngle": "-90", //结束角度
"type": "gauge",
"radius": "80%",
//设置圆的半径大小。
"center": ["50%", "50%"],
//设置中心在图框的位置,此居中。
"axisLine": {
"lineStyle": {
"width": "10",
"color": [
[
"0.33", "#62a9ff"
],
[
"0.66", "#eebc23"
],
[
"1", "#fb7293"
]
]
}
}, //仪表盘轴线
"splitLine": {
"length": "10",
"lineStyle": {
"color": "#ffffff",
}
}, //仪表盘分割线
"axisTick": {
"length": "4"
}, //仪表盘刻度
"axisLabel": {
"show": "true",
"backgroundColor": "#FFFFFF"
},
"min": "0",
"max": "1",
"pointer": {
"length": "60%",
"width": "4"
}, //仪表盘指针,设置最小和最大显示多少,如下最大显示50%,如数据非百分数格式而是数字则max为50
"title": {
"show": false,
//"offsetCenter": ["0", "90%"],
"color": "#898989",
"fontSize": "14"
}, //仪表盘标题
"detail": {
"fontSize": "30",
"backgroundColor": "#ffffff",
"offsetCenter": ["0", "0"],
} //仪表盘指示值,此处detail中的fontSize设置标柱数字的大小
}]
}
七:地图
1:散点地图
{
"color": [
"#62a9ff",
"#c098ed",
"#eebc23",
"#c3e14c",
"#53cee9",
"#8378ea",
"#67e0e3",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e062ae",
"#e690d1",
"#e7bcf3",
"#8378ea"
],
"grid": {
"left": "46px",
"bottom": "66px",
"right": "16px",
"top": "46px"
}
}
2:热力地图
{
"color": [
"#62a9ff",
"#c098ed",
"#eebc23",
"#c3e14c",
"#53cee9",
"#8378ea",
"#67e0e3",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e062ae",
"#e690d1",
"#e7bcf3",
"#8378ea"
],
"grid": {
"left": "46px",
"bottom": "66px",
"right": "16px",
"top": "46px"
}
}
3:染色地图
{
"color": [
"#62a9ff",
"#c098ed",
"#eebc23",
"#c3e14c",
"#53cee9",
"#8378ea",
"#67e0e3",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e062ae",
"#e690d1",
"#e7bcf3",
"#8378ea"
],
"grid": {
"left": "46px",
"bottom": "66px",
"right": "16px",
"top": "46px"
}
}
4:航线地图
{
"legend": {
"type": "scroll",
//让图例可以滚动
"width": "70%",
"top": "16px"
},
"gird": {
"top": "32px",
"bottom": "32px"
}
}