简洁的柱状图（一）直接复制即可运行
var myChart11 = echarts.init(document.getElementById(
'first'));
option = {
color:
'#fff',
tooltip: {
trigger:
'item'
},
calculable:
true,
grid: {
borderWidth:
0,
x:
20,
x2:
40,
y:
20,
y2:
40
},
xAxis: [
{
type:
'category',
splitLine: { show:
false },
axisTick: { show:
false },
axisLabel: {
interval:
0
},
type:
'category',
show:
true,
data: [{
value:
'张晓红', textStyle: { color:
'rgb(222,222,222)',borderWidth:[
3,
4,
5,
6]} },
{
value:
'\n黄晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李大刚', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n桥大幅', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李和明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'小敏', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n何晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n黄晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李大刚', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n桥大幅', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李和明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'小敏', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n何晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n黄晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李大刚', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n桥大幅', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李和明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'小敏', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n何晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n黄晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李大刚', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n桥大幅', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李和明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'小敏', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n何晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n黄晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李大刚', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n桥大幅', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李和明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'小敏', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n何晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n黄晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李大刚', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n桥大幅', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李和明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'小敏', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n何晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n黄晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李大刚', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n桥大幅', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李和明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'小敏', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n何晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n黄晓明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李大刚', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n桥大幅', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'李和明', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n张晓红', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'小敏', textStyle: { color:
'rgb(222,222,222)'} },
{
value:
'\n何晓明', textStyle: { color:
'rgb(222,222,222)'}}]
}
],
yAxis: [
{
type:
'value',
show:
true,
splitLine: { show:
false },
axisTick: { show:
false },
axisLabel: {
show:
true,
textStyle: {
color:
'rgb(170,170,170)'
}
}
}
],
series: [
{
name:
'接警员：',
type:
'bar',
label: { normal: { show:
true,
position:
'top'
}
},
itemStyle: {
normal: {
color: function (
params) {
var colorList = [
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD',
'#27727B',
'#60C0DD'
];
return colorList[
params.dataIndex]
}
}
},
data: [
12,
15,
10,
4,
12,
5,
6,
5,
25,
23,
7,
12,
21,
10,
4,
12,
5,
6,
5,
25,
23,
7,
12,
21,
10,
4,
12,
5,
6,
5,
25,
23,
7,
12,
21,
10,
4,
12,
5,
6,
5,
25,
23,
7],
markLine: {
lineStyle: {
normal: { color:
'rgb(200,200,200)' }
},
label: { normal: { position:
'end'} },
data: [
{ type:
'average', name:
'平均值' },
]
},
markPoint: {
tooltip: {
trigger:
'item',
backgroundColor:
'rgba(0,0,0,0)',
formatter: function (
params) {
return '<img src="'
+
params.data.symbol.replace(
'image://',
'')
+
'"/>';
}
},
data: [
{ xAxis:
0, y:
350, name:
'Line', symbolSize:
20, symbol:
'image://../asset/ico/折线图.png' },
{ xAxis:
1, y:
350, name:
'Bar', symbolSize:
20, symbol:
'image://../asset/ico/柱状图.png' },
{ xAxis:
2, y:
350, name:
'Scatter', symbolSize:
20, symbol:
'image://../asset/ico/散点图.png' },
{ xAxis:
3, y:
350, name:
'K', symbolSize:
20, symbol:
'image://../asset/ico/K线图.png' },
{ xAxis:
4, y:
350, name:
'Pie', symbolSize:
20, symbol:
'image://../asset/ico/饼状图.png' },
{ xAxis:
5, y:
350, name:
'Radar', symbolSize:
20, symbol:
'image://../asset/ico/雷达图.png' },
{ xAxis:
6, y:
350, name:
'Chord', symbolSize:
20, symbol:
'image://../asset/ico/和弦图.png' },
{ xAxis:
7, y:
350, name:
'Force', symbolSize:
20, symbol:
'image://../asset/ico/力导向图.png' },
{ xAxis:
8, y:
350, name:
'Map', symbolSize:
20, symbol:
'image://../asset/ico/地图.png' },
{ xAxis:
9, y:
350, name:
'Gauge', symbolSize:
20, symbol:
'image://../asset/ico/仪表盘.png' },
{ xAxis:
10, y:
350, name:
'Funnel', symbolSize:
20, symbol:
'image://../asset/ico/漏斗图.png' },
]
}
}
]
};
myChart11.setOption(option);
简洁的柱状图（二）
option = {
title: {
x:
'center',
text:
'ECharts例子个数统计',
subtext:
'Rainbow bar example',
link:
'http://echarts.baidu.com/doc/example.html'
},
tooltip: {
trigger:
'item'
},
toolbox: {
show:
true,
feature: {
dataView: {show:
true, readOnly:
false},
restore: {show:
true},
saveAsImage: {show:
true}
}
},
calculable:
true,
grid: {
borderWidth:
0,
y:
80,
y2:
60
},
xAxis: [
{
type:
'category',
show:
false,
data: [
'Line',
'Bar',
'Scatter',
'K',
'Pie',
'Radar',
'Chord',
'Force',
'Map',
'Gauge',
'Funnel']
}
],
yAxis: [
{
type:
'value',
show:
false
}
],
series: [
{
name:
'ECharts例子个数统计',
type:
'bar',
itemStyle: {
normal: {
color:
function(params) {
// build a color map as your need.
var colorList = [
'#C1232B',
'#B5C334',
'#FCCE10',
'#E87C25',
'#27727B',
'#FE8463',
'#9BCA63',
'#FAD860',
'#F3A43B',
'#60C0DD',
'#D7504B',
'#C6E579',
'#F4E001',
'#F0805A',
'#26C0C0'
];
return colorList[params.dataIndex]
},
label: {
show:
true,
position:
'top',
formatter:
'{b}\n{c}'
}
}
},
data: [
12,
21,
10,
4,
12,
5,
6,
5,
25,
23,
7],
markPoint: {
tooltip: {
trigger:
'item',
backgroundColor:
'rgba(0,0,0,0)',
formatter:
function(params){
return '<img src="'
+ params.data.symbol.replace(
'image://',
'')
+
'"/>';
}
},
data: [
{xAxis:
0, y:
350, name:
'Line', symbolSize:
20, symbol:
'image://../asset/ico/折线图.png'},
{xAxis:
1, y:
350, name:
'Bar', symbolSize:
20, symbol:
'image://../asset/ico/柱状图.png'},
{xAxis:
2, y:
350, name:
'Scatter', symbolSize:
20, symbol:
'image://../asset/ico/散点图.png'},
{xAxis:
3, y:
350, name:
'K', symbolSize:
20, symbol:
'image://../asset/ico/K线图.png'},
{xAxis:
4, y:
350, name:
'Pie', symbolSize:
20, symbol:
'image://../asset/ico/饼状图.png'},
{xAxis:
5, y:
350, name:
'Radar', symbolSize:
20, symbol:
'image://../asset/ico/雷达图.png'},
{xAxis:
6, y:
350, name:
'Chord', symbolSize:
20, symbol:
'image://../asset/ico/和弦图.png'},
{xAxis:
7, y:
350, name:
'Force', symbolSize:
20, symbol:
'image://../asset/ico/力导向图.png'},
{xAxis:
8, y:
350, name:
'Map', symbolSize:
20, symbol:
'image://../asset/ico/地图.png'},
{xAxis:
9, y:
350, name:
'Gauge', symbolSize:
20, symbol:
'image://../asset/ico/仪表盘.png'},
{xAxis:
10, y:
350, name:
'Funnel', symbolSize:
20, symbol:
'image://../asset/ico/漏斗图.png'},
]
}
}
]
};
标准柱状图
// 基于准备好的dom，初始化echarts实例
var myChart6 = echarts.init(document.getElementById(
'ZZT'));
// 指定图表的配置项和数据
option = {
// title : {
// text:
'某地区蒸发量和降水量',
// subtext:
'纯属虚构'
// },
grid:{
left:
'10%',
right:
'7%',
top:
'15%',
bottom:
'10%'
},
tooltip : {
trigger:
'axis'
},
color: [
'rgb(0,128,229)',
'rgb(37,196,0)',
'rgb(255,175,40)'],
legend: {
data:[
'本周',
'同比',
'环比'],
textStyle:{color:
'rgb(222,222,222)'}
},
// toolbox: {
// show :
true,
// feature : {
// dataView : {show:
true,
readOnly:
false},
// magicType : {show:
true,
type: [
'line',
'bar']},
// restore : {show:
true},
// saveAsImage : {show:
true}
// }
// },
calculable :
true,
xAxis : [
{
type :
'category',
data : [JsonValue.mc0,JsonValue.mc1,JsonValue.mc2,JsonValue.mc3],
axisLabel:{
show:
true,
textStyle:{
color:
'rgb(222,222,222)'
}
}
}
],
yAxis : [
{
type :
'value',
axisLabel:{
show:
true,
textStyle:{
color:
'rgb(222,222,222)'
}
}
}
],
series : [
{
name:
'本周',
type:
'bar',
data:[JsonValue.sum0, JsonValue.sum1, JsonValue.sum2, JsonValue.sum3],
markPoint : {
data : [
// {
type :
'max', name:
'最大值'},
// {
type :
'min', name:
'最小值'}
]
},
markLine : {
data : [
// {
type :
'average', name:
'平均值'}
]
}
},
{
name:
'同比',
type:
'bar',
data:[JsonValue.sum4, JsonValue.sum5, JsonValue.sum6, JsonValue.sum7],
markPoint : {
data : [
// {name :
'年最高', value :
182.2, xAxis:
7, yAxis:
183},
// {name :
'年最低', value :
2.3, xAxis:
11, yAxis:
3}
]
},
markLine : {
data : [
// {
type :
'average', name :
'平均值'}
]
}
},
{
name:
'环比',
type:
'bar',
data:[JsonValue.sum8, JsonValue.sum9, JsonValue.sum10, JsonValue.su11],
markPoint : {
data : [
// {
type :
'max', name:
'最大值'},
// {
type :
'min', name:
'最小值'}
]
},
markLine : {
data : [
// {
type :
'average', name:
'平均值'}
]
}
}
]
};
标准饼图
var myChart4
= echarts
.init(document
.getElementById(
'BZT'));
var option
= {
tooltip: {
trigger:
'item',
formatter:
"{a} <br/>{b} : {c} ({d}%)"
},
color:
['rgb(0,128,229)',
'rgb(98,156,255)',
'rgb(183,110,253)',
'rgb(251,70,85)',
'rgb(255,106,40)',
'rgb(255,175,40)',
'rgb(37,196,0)',
'rgb(0,128,229)',
'rgb(98,156,255)',
'rgb(183,110,253)',
'rgb(251,70,85)'],
legend: {
// left: 'left',
bottom: '0',
width:'100%',
data: [data.name0,
data.name1,
data.name2,
data.name3,
data.name4,
data.name5,
data.name6,
data.name7,
data.name8,
data.name9,
data.name10
],
textStyle:{color:'rgb(222,222,222)'}
},
series: [
{
name:
'案件名称：',
type:
'pie',
radius:
'50%',
center:
['50%',
'40%'],
data: [
{ value:
data.value0, name:
data.name0 },
{ value:
data.value1, name:
data.name1 },
{ value:
data.value2, name:
data.name2 },
{ value:
data.value3, name:
data.name3 },
{ value:
data.value4, name:
data.name4 },
{ value:
data.value5, name:
data.name5 },
{ value:
data.value6, name:
data.name6 },
{ value:
data.value7, name:
data.name7 },
{ value:
data.value8, name:
data.name8 },
{ value:
data.value9, name:
data.name9 },
{ value:
data.value10, name:
data.name10 },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart4.setOption(option);
标准折线图
var myChart5 = echarts.init(document.getElementById(
'ZXT'));
var
option = {
tooltip: {
trigger:
'axis'
},
grid: {
left:
'6%',
right:
'4%',
top:
'15%',
bottom:
'10%'
},
legend: {
data: [
'110',
'119',
'122'],
textStyle: {
color:
'rgb(222,222,222)' }
},
calculable: true,
xAxis: [
{
type:
'category',
boundaryGap: false,
data: [JsonValue.sj0, JsonValue.sj3, JsonValue.sj6, JsonValue.sj9, JsonValue.sj12, JsonValue.sj15, JsonValue.sj18],
axisLabel: {
show: true,
textStyle: {
color:
'rgb(222,222,222)'
}
}
}
],
yAxis: [
{
type:
'value',
axisLabel: {
show: true,
textStyle: {
color:
'rgb(222,222,222)'
}
}
}
],
series: [
{
name:
'110',
type:
'line',
itemStyle: {
normal: {
color:
'rgb(0,128,229)', lineStyle: {
color:
'rgb(0,128,229)'}} },
data: [JsonValue.sum0, JsonValue.sum3, JsonValue.sum6, JsonValue.sum9, JsonValue.sum12, JsonValue.sum15, JsonValue.sum18],
markPoint: {
},
markLine: {
label:{
normal:{position:
'start'}},
data: [
{ type:
'average', name:
'平均值' },
]
}
},
{
name:
'119',
type:
'line',
itemStyle: {
normal: {
color:
'rgb(251,70,85)', lineStyle: {
color:
'rgb(251,70,85)'}} },
data: [JsonValue.sum1, JsonValue.sum4, JsonValue.sum7, JsonValue.sum10, JsonValue.sum13, JsonValue.sum16, JsonValue.sum19],
markPoint: {
data: [
{ name:
'周最低', value: -
2, xAxis:
1, yAxis: -
1.5 }
]
},
markLine: {
label:{
normal:{position:
'start'}},
data: [
{ type:
'average', name:
'平均值' }
]
}
},
{
name:
'122',
type:
'line',
itemStyle: {
normal: {
color:
'rgb(37,196,0)', lineStyle: {
color:
'rgb(37,196,0)'}} },
data: [JsonValue.sum2, JsonValue.sum5, JsonValue.sum8, JsonValue.sum11, JsonValue.sum14, JsonValue.sum17, JsonValue.sum20],
markPoint: {
data: [
{ name:
'周最低', value: -
2, xAxis:
1, yAxis: -
1.5 }
]
},
markLine: {
label:{
normal:{position:
'start'}},
data: [
{ type:
'average', name:
'平均值' }
]
}
}
]
};
myChart5.setOption(
option);
地图（合肥）使用前引用地图js
var myChart55 = echarts.init(document.getElementById(
'ZXTFU'));
var option = {
geo:{
left:
'0',
right:
'0',
top:
'0',
bottom:
'0',
layoutSize:
900
},
tooltip: {
trigger:
'item'
},
legend: {
orient:
'vertical',
x:
'right',
data: [
'人口数']
},
toolbox: {
show:
true,
orient:
'vertical',
left:
'right',
top:
'40',
feature: {
saveAsImage: {}
}
},
dataRange: {
bottom:
'50',
min:
0,
max:
1000,
color: [
'orangered',
'yellow',
'lightskyblue'],
text: [
'高',
'低'],
calculable:
true
},
series: [
{
name:
'数据名称',
type:
'map',
mapType:
'hefei',
label: {
normal: {
show:
true
},
emphasis: {
show:
true
}
},
selectedMode:
'single',
itemStyle: {
normal: { label: { show:
true},borderWidth:
2 },
emphasis: { label: { show:
true} }
},
data: [
{ name:
'包河区',
value:
924 },
{ name:
'瑶海区',
value:
135 },
{ name:
'肥东县',
value:
123 },
{ name:
'庐阳区',
value:
655 },
{ name:
'长丰县',
value:
334 },
{ name:
'蜀山区',
value:
546 },
{ name:
'庐江县',
value:
245 },
{ name:
'肥西县',
value:
234 },
{ name:
'巢湖市',
value:
111 }
]
}
]
};
myChart55.setOption(option);
本文都是自己写的，喜欢的点个赞，不点赞的运行不了！
