数据可视化_grid: { left: '20%', right: '30%', bottom: '3%'-CSDN博客

各种可视化：http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

1.柱状图显示总占比

http://gallery.echartsjs.com/editor.html?c=xB1HF49Cjb

option = {
backgroundColor: '#0E2A43',
title: {
text: "是否会跟风闯红灯",
textStyle: {
color: '#00FFFF',
fontSize: 24
}
},
legend: {
bottom: 20,
textStyle: {
color: '#fff',
},
data: ['男', '女']
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},

tooltip: {
show: "true",
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#fff',
}
},
splitLine: {
show: true,
lineStyle: {
color: '#aaa',
}
},
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
}
},
data: ['会', '不会', '看情况']
}, {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ['会', '不会', '看情况']
},

],
series: [{
name: '总人数',
type: 'bar',
xAxisIndex: 1,

itemStyle: {
normal: {
show: true,
color: '#277ace',
barBorderRadius: 50,
borderWidth: 0,
borderColor: '#333',
}
},
barWidth: '20%',
data: [33, 33, 33]
}, {
name: '总人数',
type: 'bar',
xAxisIndex: 1,

itemStyle: {
normal: {
show: true,
color: '#277ace',
barBorderRadius: 50,
borderWidth: 0,
borderColor: '#333',
}
},
barWidth: '20%',
barGap: '100%',
data: [51, 51, 51]
}, {
name: '男',
type: 'bar',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00FFE6'
}, {
offset: 1,
color: '#007CC6'
}]),
barBorderRadius: 50,
borderWidth: 0,
borderColor: '#333',
}
},
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
}
},
barWidth: '20%',
data: [8, 15, 10]
}, {
name: '女',
type: 'bar',
barWidth: '20%',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3023AE'
}, {
offset: 1,
color: '#C96DD8'
}]),
barBorderRadius: 50,
borderWidth: 0,
borderColor: '#333',
}
},
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
}
},
barGap: '100%',
data: [8, 17, 26]
}

]
};

2.树状图和饼图等显示

http://gallery.echartsjs.com/editor.html?c=xHyNJ0zptZ

option = {
backgroundColor: "#404A59",
color: ['#ffd285', '#ff733f', '#ec4863'],

title: [{
text: '会议室饱和度',
left: '40%',
top: '6%',
textStyle: {
color: '#ffd285'
}
}],
tooltip: {
/*trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
formatter: function(params) {
//return params.seriesType
//return params.name+':'+params.value
}*/
},
legend: {
x: '30%',
bottom: '1%',
textStyle: {
color: '#ffd285',
},
data: ['北京', '上海', '广州']
},
radar: {
// shape: 'circle',
indicator: [{
name: 'HUB主机',
max: 6500
}, {
name: '门口显示',
max: 16000
}, {
name: '显示器',
max: 30000
}, {
name: '投影仪',
max: 38000
}, {
name: '其他',
max: 52000
}],
center: ['83%', '85%'],
radius: 80
},
grid: {
left: '10%',
right: '35%',
top: '16%',
bottom: '6%',
containLabel: true
},
toolbox: {
"show": false,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
"axisLine": {
lineStyle: {
color: '#c0576d'
}
},
"axisTick": {
"show": false
},
axisLabel: {
textStyle: {
color: '#ffd285'
}
},
boundaryGap: true, //false时X轴从0开始
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
"axisLine": {
lineStyle: {
color: '#c0576d'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#c0576d'
}
},
"axisTick": {
"show": false
},
axisLabel: {
textStyle: {
color: '#ffd285'
}
},
type: 'value'
},
series: [{
name: '郑州',
smooth: true,
type: 'bar',
symbolSize: 8,
//symbol: 'circle',
data: [90, 50, 39, 50, 120, 82, 80]
}, {
name: '永城',
smooth: true,
type: 'bar',
symbolSize: 8,
//symbol: 'circle',
data: [70, 50, 50, 87, 90, 80, 70]
}, {
name: '新乡',
smooth: true,
type: 'bar',
symbolSize: 8,
//symbol: 'circle',
data: [290, 200, 20, 132, 15, 200, 90]
}, {
type: 'pie',
center: ['83%', '20%'],
radius: ['15%', '20%'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 335,
name: '污染来源分析',
itemStyle: {
normal: {
color: '#ffd285'
}
},
label: {
normal: {
formatter: '{d} %',
textStyle: {
color: '#ffd285',
fontSize: 20

}
}
}
}, {
value: 180,
name: '占位',
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#404A59'
}
},
label: {
normal: {
textStyle: {
color: '#ffd285',
},
formatter: '\n平均值'
}
}
}]
}, {
type: 'pie',
center: ['83%', '50%'],
radius: ['15%', '20%'],
name: '饼图',
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
/* label: {
normal: {
textStyle: {
color: '#ffd285',
},
formatter: "{b}: {c} ({d}%)"
}
},*/
data: [{
value: 335,
name: '手机APP',
itemStyle: {
normal: {
color: '#FF3300'
}
}
}, {
value: 310,
name: '平台',
itemStyle: {
normal: {
color: '#FFFF00'
}
}
}, {
value: 234,
name: 'Exchange',
itemStyle: {
normal: {
color: '#00FF00'
}
}
}, {
value: 135,
name: '门口显示',
itemStyle: {
normal: {
color: '#1E90FF'
}
}
}, {
value: 1548,
name: '其他',
itemStyle: {
normal: {
color: '#ADFF2F'
}
}
}]
},

{
type: 'radar',
center: ['83%', '85%'],
//radius: ['15%', '20%'],
//name: '雷达',
tooltip: {

},
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配'
}, {
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销'
}]
}
]
}

3.折线图

http://gallery.echartsjs.com/editor.html?c=xryyFyGR3W

4.环状图

http://gallery.echartsjs.com/editor.html?c=xSkatw3JcW

//某些图例是用到过dat.gui这个插件的，只是一直没找到教程，先用起来总是好事。
//下面的代码镶嵌在echart编辑器里面
//实际运用的时候可以不按照这个来，我觉得太繁琐了

//里面的的配置方法只是把下面的步骤包装了一次！
// 原有定义gui的步骤：
// 1.为控制板定义参数
// 2.控制板以什么样的形式展示参数（调色板，下拉框，输入栏等等）
// 3.为每一项控制板条目添加动作监控
//百度dat.gui会找到更好的教程，这里只做抛砖引玉.

//http://pan.baidu.com/s/1eRC5agU 密码：raat

//下面好像有个bug，把中间的圆环的label固定在中间会发生较大的偏移，另外仔细观察
//的话也会发现左右两个中间的标签也会发生偏移的现象，所以中间的标签用标题固定
//本来想左右也用标题的，发现对称不了，样式真是搞死我了，注意灵活运用就好

//求个赞啦！ >_< !

app.configParameters = {
pie1Process: {
min: 0,
max: 100
},
pie2Process: {
min: 0,
max: 100
},
pie3Process: {
min: 0,
max: 100
},
};

app.config = {
message: 'dat.gui',
pie1Process: 25,
pie2Process: 50,
pie3Process: 75,
pie1Color: '#3dd4de',
pie2Color: '#b697cd',
pie3Color: '#a6f08f',
onChange: function() {
var tempOption = {
title: {
text: parseInt(app.config.pie2Process) + '%',
textStyle: {
color: app.config.pie2Color,
}
},
series: [{
data: [{
value: parseInt(app.config.pie1Process),
itemStyle: {
normal: {
color: app.config.pie1Color,
shadowColor: app.config.pie1Color,
}
},
label: {
normal: {
formatter: '{d}%',
position: 'center',
show: true,
textStyle: {
fontSize: '35',
fontWeight: 'normal',
color: app.config.pie1Color
}
}
},
}, {
value: 100 - parseInt(app.config.pie1Process),
itemStyle: placeHolderStyle,

}]
}, {
data: [{
value: parseInt(app.config.pie2Process),
itemStyle: {
normal: {
color: app.config.pie2Color,
shadowColor: app.config.pie2Color,
}
}
}, {
value: 100 - parseInt(app.config.pie2Process),
itemStyle: placeHolderStyle,
}]
}, {
data: [{
value: parseInt(app.config.pie3Process),
label: {
normal: {
formatter: '{d}%',
position: 'center',
show: true,
textStyle: {
fontSize: '35',
fontWeight: 'normal',
color: app.config.pie3Color
}
}
},
itemStyle: {
normal: {
color: app.config.pie3Color,
shadowColor: app.config.pie3Color,
}
}
}, {
value: 100 - parseInt(app.config.pie3Process),

itemStyle: placeHolderStyle,
}]
}]
}
myChart.setOption(tempOption);
}
};

// 这里借鉴'5643我'和'小明的小可'两位大神的圆环图格式演示一下效果
var dataStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 40,
shadowColor: 'rgba(40, 40, 40, 0.5)',
}
};

var placeHolderStyle = {
normal: {
color: 'rgba(44,59,70,1)', // 未完成的圆环的颜色
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(44,59,70,1)' // 未完成的圆环的颜色
}
};

option = {
title: {
text: '50%',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
color: '#b697cd',
fontSize: 35
}
},
tooltip: {
show: false,
},
toolbox: {
show: false,
},
// color : ['#3dd4de','#b697cd','#a6f08f'],
backgroundColor: 'rgba(0,0,0,0.8)',
series: [{
name: 'Pie1',
type: 'pie',
clockWise: false,
radius: [80, 85],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['25%', '50%'],
data: [{
value: 25,
label: {
normal: {
formatter: '{d}%',
position: 'center',
show: true,
textStyle: {
fontSize: '35',
fontWeight: 'normal',
color: '#3dd4de'
}
}
},
itemStyle: {
normal: {
color: '#3dd4de',
shadowColor: '#3dd4de',
shadowBlur: 10
}
}
}, {
value: 75,
name: 'invisible',
itemStyle: placeHolderStyle,
}]
}, {
name: 'Pie2',
type: 'pie',
clockWise: false,
radius: [80, 85],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['50%', '50%'],
data: [{
value: 50,
itemStyle: {
normal: {
color: '#b697cd',
shadowColor: '#b697cd',
shadowBlur: 10
}
}
}, {
value: 50,
name: 'invisible',
itemStyle: placeHolderStyle,
}]
}, {
name: 'Pie3',
type: 'pie',
clockWise: false,
radius: [80, 85],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['75%', '50%'],
data: [{
value: 75,
label: {
normal: {
formatter: '{d}%',
position: 'center',
show: true,
textStyle: {
fontSize: '35',
fontWeight: 'normal',
color: '#a6f08f'
}
}
},
itemStyle: {
normal: {
color: '#a6f08f',
shadowColor: '#a6f08f',
shadowBlur: 10
}
}
}, {
value: 25,
name: 'invisible',
itemStyle: placeHolderStyle,
}]
}, ]
}

5.柱状图加雷达

http://gallery.echartsjs.com/editor.html?c=xBksfSpF4b

//------------------------------------------------以下的变量为最终插入数据的变量------------------------------------------------------------
//条形图x轴
var xAxisBarChart = [];
//条形图数据
var dataBarChart = [];
//布朗尼一周销量（7个数）
var dataBrownies = [];
//马卡龙一周销量（7个数）
var dataMacarons = [];
//提拉米苏一周销量（7个数）
var dataTiramisu = [];
//时间轴数据
var timelineData = [];
//数据插入图表
var optionsData = [];

//------------------------------------------------以下的变量为数据转换时的变量------------------------------------------------------------
//极坐标轴显示星期几
var weekDay = 0;
//全数据数组
var sourceArray = [];
//判断是否排序
var SortOrNot = false;
//反序排序：从大到小
var compare = function(x, y) {
if (x.value < y.value) {
return 1;
} else if (x.value > y.value) {
return -1;
} else {
return 0;
}
}
//柱状图数据的映射集合，实现排序的转换
var dataBarChartMap = new Map();
//柱状图数据的寄存器，最后一步再导入到dataBarChart中
var dataBarChartTemp = [];

//图表加载
option = {
baseOption: {
timeline: {
x: 0,
axisType: 'category',
orient: 'vertical',
autoPlay: true,
playInterval: 1000,
data: timelineData,
left: 10,
right: null,
top: 50,
bottom: 0,
width: 70,
height: null,
inverse: true,
symbol: 'none',
lineStyle: {
color: '#555'
},
checkpointStyle: {
color: '#bbb',
borderColor: '#777',
borderWidth: 2
},
label: {
normal: {
textStyle: {
color: '#999',
fontSize: 15
}
},
emphasis: {
textStyle: {
color: '#999',
fontSize: 20
}
}
},
},
title: {
text: 'Snow蛋糕店-本周各类蛋糕销量',
subtext: '点击极坐标系下即可与圆环图交互\n点击柱状图排序',
textAlign: 'left'
},
tooltip: {
trigger: 'item',
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: tooltipFormatter,

},
angleAxis: {
type: 'category',
data: [{
value: '星期一',
textStyle: {
fontSize: 25,
}
}, '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
z: 10
},
grid: {
left: '6%',
right: '5%',
top: '16%',
bottom: '3%',
containLabel: true
},
polar: {
center: ['80%', '30%'],
radius: 100,
},
xAxis: [{
type: 'category',
data: xAxisBarChart,
axisLabel: {
'interval': 0
},
}],
yAxis: [{
type: 'value',
max: 600,
show: false,
}],
radiusAxis: {},
series: [{
type: 'bar',
data: dataBrownies,
coordinateSystem: 'polar',
name: '布朗尼',
center: ['80%', '30%'],
stack: 'a',
itemStyle: {
normal: {
borderWidth: 4,
borderColor: '#ffffff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}, {
type: 'bar',
data: dataMacarons,
coordinateSystem: 'polar',
name: '马卡龙',
center: ['80%', '30%'],
stack: 'a',
itemStyle: {
normal: {
borderWidth: 4,
borderColor: '#ffffff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}, {
type: 'bar',
data: dataTiramisu,
coordinateSystem: 'polar',
name: '提拉米苏',
center: ['80%', '30%'],
stack: 'a',
itemStyle: {
normal: {
borderWidth: 3,
borderColor: '#ffffff',
},
emphasis: {
borderWidth: 3,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}, {
name: '每天销量',
type: 'pie',
center: ['80%', '30%'],
radius: ['45%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'outside',
formatter: '{b} : {c} ({d}%)'

},
emphasis: {
show: true,
textStyle: {
fontSize: '15',
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: tooltipFormatter,

},
},
labelLine: {
normal: {
show: false
}
},
legend: {
show: true,
orient: 'vertical',
x: 'left',
y: 'bottom',
data: ['布朗尼', '马卡龙', '提拉米苏']
},
itemStyle: {
normal: {
borderWidth: 3,
borderColor: '#ffffff',
},
emphasis: {
show: true,
textStyle: {
fontSize: '15',
fontWeight: 'normal'
}
}
}
}, {
name: '半年销量',
type: 'bar',
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'outside',
formatter: '{c}'

},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'normal'
}
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: 3,
borderColor: '#ffffff',
},
emphasis: {
borderWidth: 3,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
},
options: optionsData,
}

//全数据计算
for (var week = 0; week < 26; week++) {
var weekDataArray = [];
for (var day = 0; day < 7; day++) {
var productSales = [{
'Brownies': parseInt(20 * Math.random()),
'Macarons': parseInt(20 * Math.random()),
'Tiramisu': parseInt(20 * Math.random())
}];
weekDataArray.push(productSales);
}
//一天的数据由3种蛋糕组成，一周由7天组成，半年由26周组成，所以写三个循环
sourceArray.push(weekDataArray);
timelineData.push('第' + (week + 1) + '周');
}

everyProductCalculate();
//现实情况下大多数都是根据数据源对数据进行切割和合并
function everyProductCalculate() {
//数组容器重置
dataBarChartMap = new Map();
dataBarChartTemp = [];
xAxisBarChart = [];
dataBrownies = [];
dataMacarons = [];
dataTiramisu = [];
optionsData = [];

//柱状图数据计算，就是一周合计的计算
for (var i = 0; i < sourceArray.length; i++) {
var weekSum = 0;
for (var j = 0; j < sourceArray[i].length; j++) {
var daySum = 0;
daySum = sourceArray[i][j][0].Brownies +
sourceArray[i][j][0].Macarons +
sourceArray[i][j][0].Tiramisu;
weekSum = weekSum + daySum;
}
dataBarChartTemp.push(weekSum);
}
//数据插入到map集合中，由星期和每周销量相互对应
for (var i = 1; i < sourceArray.length + 1; i++) {
dataBarChartMap.put(i, dataBarChartTemp[i - 1]);

}
//是否排序
if (SortOrNot) {
dataBarChartMap.elements.sort(compare);
dataBarChartTemp = dataBarChartMap.elements;
}
//得到dataBarChart，柱状图数据
dataBarChart = dataBarChartTemp;
for (var i = 0; i < sourceArray.length; i++) {
var xAxisBarChartTemp = [];
for (var j = 0; j < sourceArray.length; j++) {
if (i == dataBarChartMap.elements[j].key - 1) {
xAxisBarChartTemp.push('\n>第' + dataBarChartMap.elements[j].key + '周<');
} else {
xAxisBarChartTemp.push(dataBarChartMap.elements[j].key + '周');
}
}
//得到xAxisBarChart，柱状图x轴数据
xAxisBarChart.push(xAxisBarChartTemp);
}
//
//每个产品全部销量计算（一个产品包含7个值）
for (var i = 0; i < sourceArray.length; i++) {
dataBrowniesTemp = [];
dataMacaronsTemp = [];
dataTiramisuTemp = [];
for (var j = 0; j < sourceArray[i].length; j++) {
dataBrowniesTemp.push(sourceArray[i][j][0].Brownies);
dataMacaronsTemp.push(sourceArray[i][j][0].Macarons);
dataTiramisuTemp.push(sourceArray[i][j][0].Tiramisu);
}
//得到蛋糕各自的数据
dataBrownies.push(dataBrowniesTemp);
dataMacarons.push(dataMacaronsTemp);
dataTiramisu.push(dataTiramisuTemp);
}
for (var i = 0; i < sourceArray.length; i++) {
optionsData.push({
'series': [{
'data': dataBrownies[i]
}, {
'data': dataMacarons[i]
}, {
'data': dataTiramisu[i]
}, {
'data': [{
value: dataBrownies[i][weekDay],
name: '布朗尼'
}, {
value: dataMacarons[i][weekDay],
name: '马卡龙'
}, {
value: dataTiramisu[i][weekDay],
name: '提拉米苏'
}]
}, {
'data': dataBarChart
},

],
'xAxis': [{
'data': xAxisBarChart[i],
}]
});
}
option.options = optionsData;

myChart.setOption(option);
}

myChart.on('click', function(params) {
//直接改变数据的内容
if (params.componentSubType != 'pie' &&
params.seriesName != '半年销量') {
weekDay = params.dataIndex;
for (var i = 0; i < option.baseOption.timeline.data.length; i++) {
option.options[i].series[3].data[0].value = dataBrownies[i][weekDay];
option.options[i].series[3].data[1].value = dataMacarons[i][weekDay];
option.options[i].series[3].data[2].value = dataTiramisu[i][weekDay];
}
var weekDayData = ['星期一', '星期二', '星期三', '星期四', '星期五',
'星期六', '星期日'
];
weekDayData[weekDay] = {
value: weekDayData[weekDay],
textStyle: {
fontSize: 25,
}
};
option.baseOption.timeline.autoPlay = false;
option.baseOption.angleAxis.data = weekDayData;
myChart.setOption(option);
}
//重新执行数据转换过程
else if (params.componentSubType == 'bar' &&
params.seriesName == '半年销量') {
if (SortOrNot == false) {
SortOrNot = true;
} else {
SortOrNot = false;
}
everyProductCalculate();
option.options = optionsData;
myChart.setOption(option);
}
});
//提示框体
function tooltipFormatter(params) {
var valuesFormatter = [];
if (params.componentSubType == 'pie') {
valuesFormatter
.push('<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
'本日销量' +
'<br>' +
'</div>' +
'<span style="color:' +
params.color +
'">' + params.name + '</span>: ' + params.value);
} else {
valuesFormatter
.push('<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
params.seriesName +
'</div>' +
'<span style="color:' +
params.color +
'">' +
params.name +
'</span>: ' +
params.value + '<br>');
}

return valuesFormatter;
}
//map集合,这里应该写在工具脚本中
function Map() {
this.elements = new Array();

// 获取Map元素个数
this.size = function() {
return this.elements.length;
},

// 判断Map是否为空
this.isEmpty = function() {
return (this.elements.length < 1);
},

// 删除Map所有元素
this.clear = function() {
this.elements = new Array();
},

// 向Map中增加元素（key, value)
this.put = function(_key, _value) {
if (this.containsKey(_key) == true) {
if (this.containsValue(_value)) {
if (this.remove(_key) == true) {
this.elements.push({
key: _key,
value: _value
});
}
} else {
this.elements.push({
key: _key,
value: _value
});
}
} else {
this.elements.push({
key: _key,
value: _value
});
}
},

// 删除指定key的元素，成功返回true，失败返回false
this.remove = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
this.elements.splice(i, 1);
return true;
}
}
} catch (e) {
bln = false;
}
return bln;
},

// 获取指定key的元素值value，失败返回null
this.get = function(_key) {
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
return this.elements[i].value;
}
}
} catch (e) {
return null;
}
},

// 获取指定索引的元素（使用element.key，element.value获取key和value），失败返回null
this.element = function(_index) {
if (_index < 0 || _index >= this.elements.length) {
return null;
}
return this.elements[_index];
},

// 判断Map中是否含有指定key的元素
this.containsKey = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
},

// 判断Map中是否含有指定value的元素
this.containsValue = function(_value) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].value == _value) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
},

// 获取Map中所有key的数组（array）
this.keys = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].key);
}
return arr;
},

// 获取Map中所有value的数组（array）
this.values = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].value);
}
return arr;
};
}

6.柱状折线图

http://gallery.echartsjs.com/editor.html?c=pictorialBar-dotted

// Generate data
var category = [];
var dottedBase = +new Date();
var lineData = [];
var barData = [];

for (var i = 0; i < 20; i++) {
var date = new Date(dottedBase += 1000 * 3600 * 24);
category.push([
date.getFullYear(),
date.getMonth() + 1,
date.getDate()
].join('-'));
var b = Math.random() * 200;
var d = Math.random() * 200;
barData.push(b)
lineData.push(d + b);
}

// option
option = {
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333'
}
}
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: {show: false},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [{
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: lineData
}, {
name: 'bar',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#14c8d4'},
{offset: 1, color: '#43eec6'}
]
)
}
},
data: barData
}, {
name: 'line',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(20,200,212,0.5)'},
{offset: 0.2, color: 'rgba(20,200,212,0.2)'},
{offset: 1, color: 'rgba(20,200,212,0)'}
]
)
}
},
z: -12,
data: lineData
}, {
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: '#0f375f'
}
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: lineData
}]
};