1.未来一周气温变化:
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> markline标记线和markpoint标记点</ title>
< script src = " js/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
var option = {
title : {
text : '未来一周气温变化' ,
} ,
toolbox : {
show : true ,
feature : {
dataView : {
show : true
} ,
restore : {
show : true
} ,
dataZoom : {
show : true
} ,
saveAsImage : {
show : true
} ,
magicType : {
type : [ 'line' , 'bar' ]
}
}
} ,
tooltip : {
trigger : 'axis' ,
formatter : "{a}<br/>{b}:{c}°C"
} ,
legend : {
data : [ '气温变化' ]
} ,
xAxis : {
data : [ "周一" , "周二" , "周三" , "周四" , "周五" , "周六" , "周日" ]
} ,
yAxis : { } ,
series : [ {
name : '气温变化' ,
type : 'line' ,
data : [ 21 , 25 , 28 , 31 , 26 , 26 , 22 , 18 ] ,
markPoint : {
data : [ {
type : 'max' ,
name : '最大值'
} , {
type : 'min' ,
name : '最小值' ,
symbol : 'arrow'
} ]
} ,
markLine : {
data : [ {
type : 'average' ,
name : '平均值'
} ]
}
} ]
} ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
2.动态
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> 第一个 ECharts 实例</ title>
< script src = " js/jquery.min.js" > </ script>
< script src = " js/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 600px; height : 400px; " > </ div>
< script type = " text/javascript" >
var base = + new Date ( 2014 , 9 , 3 ) ;
var oneDay = 24 * 3600 * 1000 ;
var date = [ ] ;
var data = [ Math. random ( ) * 150 ] ;
var now = new Date ( base) ;
function addData ( shift ) {
now = [ now. getFullYear ( ) , now. getMonth ( ) + 1 , now. getDate ( ) ] . join ( '/' ) ;
date. push ( now) ;
data. push ( ( Math. random ( ) - 0.4 ) * 10 + data[ data. length - 1 ] ) ;
if ( shift) {
date. shift ( ) ;
data. shift ( ) ;
}
now = new Date ( + new Date ( now) + oneDay) ;
}
for ( var i = 1 ; i < 100 ; i++ ) {
addData ( ) ;
}
option = {
xAxis : {
type : 'category' ,
boundaryGap : false ,
data : date
} ,
yAxis : {
boundaryGap : [ 0 , '50%' ] ,
type : 'value'
} ,
series : [
{
name : '成交' ,
type : 'line' ,
smooth : true ,
symbol : 'none' ,
stack : 'a' ,
areaStyle : {
normal : { }
} ,
data : data
}
]
} ;
setInterval ( function ( ) {
addData ( true ) ;
myChart. setOption ( {
xAxis : {
data : date
} ,
series : [ {
name : '成交' ,
data : data
} ]
} ) ;
} , 500 ) ;
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
myChart. setOption ( option)
</ script>
</ body>
3.饼图
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> pie饼图</ title>
< script src = " js/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
var option = {
title : {
text : '重庆市常住人口' ,
subtext : '数据来源百度百科' ,
x : 'center'
} ,
tooltip : {
trigger : 'item' ,
formatter : "{a}<br/>{b}:{c}({d}%)"
} ,
legend : {
orient : 'vertical' ,
left : 'left' ,
data : [ '渝中区' , '万州区' , '涪陵区' , '大渡口区' , '江北区' , "沙坪坝区" , "九龙坡区" ,
"南岸区" , "北碚区" , "綦江区" , "大足区" , "渝北区" , "巴南区" , "黔江区" , "长寿区" ,
"江津区" , "合川区" , "永川区" , "南川区" , "璧山区" , "铜梁区" , "潼南区" , "荣昌区" ,
"开州区" , "梁平区" , "武隆区" , "城口县" , "丰都县" , "垫江县" , "忠县" , "云阳县" ,
"奉节县" , "巫山县" , "巫溪县" , "石柱土家族自治县" , "秀山土家族苗族自治县" ,
"酉阳土家族苗族自治县" , "彭水苗族土家族自治县" ]
} ,
series : [ {
name : '所占比例' ,
type : 'pie' ,
radius : '55%' ,
center : [ '50%' , '60%' ] ,
data : [ {
value : 64.95 ,
name : '渝中区'
} , {
value : 160.74 ,
name : '万州区'
} , {
value : 114.08 ,
name : '涪陵区'
} , {
value : 33.27 ,
name : '大渡口区'
} , {
value : 84.98 ,
name : '江北区'
} , {
value : 113.39 ,
name : '沙坪坝区'
} , {
value : 118.69 ,
name : '九龙坡区'
} , {
value : 85.81 ,
name : '南岸区'
} , {
value : 78.62 ,
name : '北碚区'
} , {
value : 107.84 ,
name : '綦江区'
} , {
value : 76.39 ,
name : '大足区'
} , {
value : 160.25 ,
name : '渝北区'
} , {
value : 100.58 ,
name : '巴南区'
} , {
value : 46.2 ,
name : '黔江区'
} , {
value : 82.43 ,
name : '长寿区'
} , {
value : 133.19 ,
name : '江津区'
} , {
value : 136.06 ,
name : '合川区'
} , {
value : 109.61 ,
name : '永川区'
} , {
value : 56.43 ,
name : '南川区'
} , {
value : 72.52 ,
name : '璧山区'
} , {
value : 68.72 ,
name : '铜梁区'
} , {
value : 68.23 ,
name : '潼南区'
} , {
value : 70.1 ,
name : '荣昌区'
} , {
value : 169.12 ,
name : '开州区'
} , {
value : 66.40 ,
name : '梁平区'
} , {
value : 41.44 ,
name : '武隆区'
} , {
value : 18.63 ,
name : '城口县'
} , {
value : 59.56 ,
name : '丰都县'
} , {
value : 67.67 ,
name : '垫江县'
} , {
value : 70.80 ,
name : '忠县'
} , {
value : 89.66 ,
name : '云阳县'
} , {
value : 75.33 ,
name : '奉节县'
} , {
value : 46.23 ,
name : '巫山县'
} , {
value : 39.1 ,
name : '巫溪县'
} , {
value : 38.65 ,
name : '石柱土家族自治县'
} , {
value : 49.13 ,
name : '秀山土家族苗族自治县'
} , {
value : 55.65 ,
name : '酉阳土家族苗族自治县'
} , {
value : 50.64 ,
name : '彭水苗族土家族自治县'
} ]
} ]
} ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
4.雷电灾害统计
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> title标题组件</ title>
< script src = " js/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart= echarts. init ( document. getElementById ( 'main' ) ) ;
var option= {
title : {
show : true ,
text : '雷电灾害事故' ,
subtext : '(单位:例)' ,
left : '100' ,
borderColor : 'blue' ,
borderWidth : 2 ,
textStyle : { fontSize : 19 }
} ,
toolbox : {
show : true ,
feature : { saveAsImage : { show : true } }
} ,
legend : {
data : [ '雷电灾害事数' ]
} ,
xAxis : {
data : [ "1997" , "1998" , "1999" , "2000" , "2001" , "2002" , "2003" , "2004" , "2005" , "2006" , "2007" , "2008" , "2009" , "2010" ] } ,
yAxis : { } ,
series : [ {
name : '雷电灾害事数' ,
type : 'bar' ,
data : [ 556 , 1102 , 1467 , 2099 , 1995 , 3498 , 4014 , 5753 , 5322 , 6265 , 6346 , 7123 , 6586 , 6019 ] }
] } ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
5.住宅面积
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> toolbox工具箱组件</ title>
< script src = " js/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 1100px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
var option = {
title : {
text : '武汉各区商品住宅成交面积'
} ,
toolbox : {
show : true ,
feature : {
dataView : {
show : true
} ,
restore : {
show : true
} ,
dataZoom : {
show : true
} ,
saveAsImage : {
show : true
} ,
magicType : {
type : [ 'line' , 'bar' ]
}
}
} ,
legend : {
data : [ '面积:m2' ]
} ,
xAxis : {
data : [ "江岸区" , "江汉区" , "硚口区" , "汉阳区" , "武昌区" , "青山区" , "洪山区" ,
"东西湖区" , "汉南区" , "蔡甸区" , "江夏区" , "黄陂区" , "新洲区" ]
} ,
yAxis : { } ,
series : [ {
name : '面积:m2' ,
type : 'bar' ,
data : [ 3301.02 , 2332.81 , 4040.86 , 3524.27 , 5346.63 , 1100.81 ,
2014.5 , 2261 , 1409.7 , 3409.42 , 2347.92 , 1057.12 , 992.84 ]
} ]
} ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
6.公式销售额
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> tooltip弹窗组件</ title>
< script src = " js/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
var option = {
title : {
text : '某公司2017年销售额'
} ,
toolbox : {
show : true ,
feature : {
dataView : {
show : true
} ,
restore : {
show : true
} ,
dataZoom : {
show : true
} ,
saveAsImage : {
show : true
} ,
magicType : {
type : [ 'line' , 'bar' ]
}
}
} ,
tooltip : {
trigger : 'axis'
} ,
legend : {
data : [ '销售额' ]
} ,
xAxis : {
data : [ "1月" , "2月" , "3月" , "4月" , "5月" , "6月" , "7月" , "8月" , "9月" ,
"10月" , "11月" , "12月" ]
} ,
yAxis : { } ,
series : [ {
name : '销售额' ,
type : 'bar' ,
data : [ 5673 , 4546 , 3325 , 2246 , 2684 , 3742 , 4685 , 5346 , 3420 ,
5885 , 3791 , 4953 ]
} ]
} ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
7.汽车仪表盘
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< script src = " https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px" > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( "main" ) , 'dark' ) ;
var color1 = [ [ 0.33 , "rgba(0,255,0,1)" ] , [ 0.5 , "rgba(0,255,255,1)" ] , [ 1 , "rgba(255,0,0,1)" ] ] ;
var option = {
backgroundColor : 'rgb(0,0,0,1)' ,
title : {
text : '汽车仪表盘' ,
textStyle : {
fontsize : 30 ,
color : '#DC143C'
} ,
x : '45%' ,
y : '10%'
} ,
tooltip : {
formatter : '{a}<br/>{b}:{c}'
} ,
series : [
{
name : '仪表盘' ,
type : 'gauge' ,
min : 0 ,
max : 240 ,
radius : '50%' ,
splitNumber : 12 ,
axisLine : {
lineStyle : {
width : 5 ,
color : color1,
}
} ,
axisTick : {
length : 10 , splitNumber : 5 , lineStyle : { color : '#FDCF20' }
} ,
splitLine : {
length : 20 ,
lineStyle : { color : '#FDCF20' , }
} ,
title : {
textStyle : { fontWeight : 'bolder' , fontsize : 20 , fontStyle : 'italic' , color : 'auto' } ,
} ,
pointer : {
show : true ,
length : '75%' ,
width : 10
} ,
itemStyle : {
color : color1,
shadowBlur : 20 ,
shadowColor : "pink" ,
} ,
detail : {
show : true ,
color : 'auto' ,
formatter : '{value}'
} ,
data :
[ { name : '速度表(km/h)' , value : 20 } ,
]
} ,
{
name : '转速' , type : 'gauge' ,
center : [ '20%' , '55%' ] ,
radius : '35%' ,
min : 0 ,
max : 7 ,
endAngle : 45 ,
splitNumber : 7 ,
axisLine : { show : true , lineStyle : { width : 4 , color : color1} } ,
axisTick : {
length : 6 ,
splitNumber : 5 ,
lineStyle : {
color : '#FDCF20'
}
} ,
splitLine : {
length : 10 ,
lineStyle : {
color : '#FDCF20'
}
} ,
pointer : {
show : true ,
length : '70%' ,
width : 5
} ,
itemStyle : {
color : color1,
shadowBlur : 20 ,
shadowColor : "pink" ,
} ,
title : {
offsetCenter : [ '30% ' , '-30%' ] ,
textStyle : { fontWeight : 'bolder' , fontsize : 3 , fontStyle : 'italic' , color : 'auto' } ,
} ,
detail : { textStyle : { fontWeight : 'bolder' , fontSize : 20 , color : 'auto' } , formatter : '{value} ' } ,
data : [ { value : 1.5 , name : '转速(x1000 r/m)' } ]
} ,
{
name : '里程' , type : 'gauge' ,
center : [ '80%' , '50%' ] ,
min : 0 ,
max : 10 ,
startAngle : 135 ,
endAngle : 45 ,
splitNumber : 5 ,
radius : '35%' ,
axisLine : {
lineStyle : { color : color1, width : 3 }
} ,
axisTick : {
splitNumber : 5 ,
length : 5 ,
lineStyle : { color : '#FDCF20' }
} ,
splitLine : {
length : 15 , lineStyle : { color : '#FDCF20' }
} ,
pointer : {
show : true ,
width : 3 ,
length : '70%'
} ,
itemStyle : {
color : color1,
shadowBlur : 10 ,
shadowColor : 'white'
} ,
title : {
offsetCenter : [ '0' , '-120%' ] ,
textStyle : { fontWeight : 'bolder' , fontsize : 3 , fontStyle : 'italic' , color : 'auto' } ,
} ,
detail : { show : false , textStyle : { fontWeight : 'bolder' , fontSize : 20 , color : 'auto' } , formatter : '{value} ' } ,
data : [ { value : 1.5 , name : '里程表(x1000 KM)' } ]
} ,
{
name : '油表' , type : 'gauge' ,
center : [ '80%' , '50%' ] ,
radius : '35%' ,
min : 0 ,
max : 2 ,
startAngle : 315 , endAngle : 225 ,
splitNumber : 2 ,
axisLine : { lineStyle : { width : 3 , color : color1} } ,
axisTick : {
splitNumber : 5 ,
length : 10 ,
lineStyle : {
color : '#FDCF20'
}
} ,
axisLabel : {
formatter : function ( v ) {
switch ( v + '' ) {
case '0' : return 'E' ;
case '1' : return '油表' ;
case '2' : return 'F' ;
}
}
} ,
splitLine : {
length : 15 ,
lineStyle : {
color : '#FDCF20'
}
} ,
pointer : { width : 4 } ,
itemStyle : {
color : 'yellow' ,
shadowBlur : 10 ,
shadowColor : 'white'
} ,
title : { show : false } ,
detail : { show : false } ,
data : [ { value : 0.5 , name : 'gas' } ]
} ,
]
}
setInterval ( function ( arg ) {
var num = Math. random ( )
option. series[ 0 ] . data[ 0 ] . value = ( num* 240 ) . toFixed ( 2 ) ;
option. series[ 1 ] . data[ 0 ] . value = ( num* 7 ) . toFixed ( 2 ) ;
option. series[ 2 ] . data[ 0 ] . value = ( num* 10 ) . toFixed ( 2 ) ;
option. series[ 3 ] . data[ 0 ] . value = ( num* 10 ) . toFixed ( 2 ) ;
myChart. setOption ( option)
} , 1000 )
</ script>
</ body>
</ html>
8.七天用户数据
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" >
< title> </ title>
</ head>
< script type = " text/javascript" src = " js/echarts.min.js" > </ script>
< body>
< div id = " main" style = " width : 600px; height : 400px; " > </ div>
</ body>
< body>
</ body>
</ html>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
var arr = [ ] ;
function getBeforeDate ( n ) {
var n = n;
console. log ( n) ;
var d = new Date ( ) ;
var year = d. getFullYear ( ) ;
var mon = d. getMonth ( ) + 1 ;
var day = d. getDate ( ) ;
if ( day <= n) {
if ( mon > 1 ) {
mon = mon - 1 ;
} else {
year = year - 1 ;
mon = 12 ;
}
}
d. setDate ( d. getDate ( ) + n) ;
year = d. getFullYear ( ) ;
mon = d. getMonth ( ) + 1 ;
day = d. getDate ( ) ;
s = ( mon < 10 ? ( '0' + mon) : mon) + "-" + ( day < 10 ? ( '0' + day) : day) ;
return s;
}
for ( var i = 0 ; i > - 7 ; i-- ) {
arr. push ( getBeforeDate ( i) ) ;
}
console. log ( arr) ;
option = {
title : {
text : '七天用户数据'
} ,
tooltip : {
trigger : 'axis' ,
} ,
xAxis : {
type : 'category' ,
name : '日期' ,
boundaryGap : false ,
data : arr. reverse ( ) ,
nameGap : 7 ,
axisTick : {
inside : true
}
} ,
yAxis : {
type : 'value' ,
name : '人数' ,
splitLine : {
show : false
} ,
nameGap : 15 ,
axisTick : {
inside : true
}
} ,
series : [ {
type : 'line' ,
name : '人数' ,
data : [ 40 , 50 , 30 , 90 , 100 , 60 , 120 ] ,
symbol : 'circle' ,
itemStyle : {
normal : {
shadowBlur : 50 ,
shadowColor : 'red' ,
color : 'red' ,
lineStyle : {
color : '#4d6dfd' ,
width : 1
}
}
}
} ] ,
} ;
myChart. setOption ( option) ;
</ script>
9.雷达图
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> radar雷达图</ title>
< script src = " js/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
option = {
title : {
text : '基础雷达图'
} ,
tooltip : { } ,
legend : {
data : [ '预算分配(AllocatedBudget)' , '实际开销(ActualSpending)' ]
} ,
radar : {
indicator : [ {
name : '销售(sales)' ,
max : 6500
} , {
name : '管理(Administration)' ,
max : 16000
} , {
name : '信息技术(InformationTechology)' ,
max : 30000
} , {
name : '客服(CustomerSupport)' ,
max : 38000
} , {
name : '研发(Development)' ,
max : 52000
} , {
name : '市场(Marketing)' ,
max : 25000
} ]
} ,
series : [ {
name : '预算vs开销(Budgetvsspending)' ,
type : 'radar' ,
data : [ {
value : [ 4300 , 10000 , 28000 , 35000 , 50000 , 19000 ] ,
name : '预算分配(AllocatedBudget)'
} , {
value : [ 5000 , 14000 , 28000 , 31000 , 42000 , 21000 ] ,
name : '实际开销(ActualSpending)'
} ]
} ]
} ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
10.散点图
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> scatter散点图</ title>
< script src = js/echarts.min.js> </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart= echarts. init ( document. getElementById ( 'main' ) ) ;
var dataBJ= [
[ 1 , 55 , 9 , 56 , 0.46 , 18 , 6 , "良" ] ,
[ 2 , 25 , 11 , 21 , 0.65 , 34 , 9 , "优" ] ,
[ 3 , 56 , 7 , 63 , 0.3 , 14 , 5 , "良" ] ,
[ 4 , 33 , 7 , 29 , 0.33 , 16 , 6 , "优" ] ,
[ 5 , 42 , 24 , 44 , 0.76 , 40 , 16 , "优" ] ,
[ 6 , 82 , 58 , 90 , 1.77 , 68 , 33 , "良" ] ,
[ 7 , 74 , 49 , 77 , 1.46 , 48 , 27 , "良" ] ,
[ 8 , 78 , 55 , 80 , 1.29 , 59 , 29 , "良" ] ,
[ 9 , 267 , 216 , 280 , 4.8 , 108 , 64 , "重度污染" ] ,
[ 10 , 185 , 127 , 216 , 2.52 , 61 , 27 , "中度污染" ] ,
[ 11 , 39 , 19 , 38 , 0.57 , 31 , 15 , "优" ] ,
[ 12 , 41 , 11 , 40 , 0.43 , 21 , 7 , "优" ] ,
[ 13 , 64 , 38 , 74 , 1.04 , 46 , 22 , "良" ] ,
[ 14 , 108 , 79 , 120 , 1.7 , 75 , 41 , "轻度污染" ] ,
[ 15 , 108 , 63 , 116 , 1.48 , 44 , 26 , "轻度污染" ] ,
[ 16 , 33 , 6 , 29 , 0.34 , 13 , 5 , "优" ] ,
[ 17 , 94 , 66 , 110 , 1.54 , 62 , 31 , "良" ] ,
[ 18 , 186 , 142 , 192 , 3.88 , 93 , 79 , "中度污染" ] ,
[ 19 , 57 , 31 , 54 , 0.96 , 32 , 14 , "良" ] ,
[ 20 , 22 , 8 , 17 , 0.48 , 23 , 10 , "优" ] ,
[ 21 , 39 , 15 , 36 , 0.61 , 29 , 13 , "优" ] ,
[ 22 , 94 , 69 , 114 , 2.08 , 73 , 39 , "良" ] ,
[ 23 , 99 , 73 , 110 , 2.43 , 76 , 48 , "良" ] ,
[ 24 , 31 , 12 , 30 , 0.5 , 32 , 16 , "优" ] ,
[ 25 , 42 , 27 , 43 , 1 , 53 , 22 , "优" ] ,
[ 26 , 154 , 117 , 157 , 3.05 , 92 , 58 , "中度污染" ] ,
[ 27 , 234 , 185 , 230 , 4.09 , 123 , 69 , "重度污染" ] ,
[ 28 , 160 , 120 , 186 , 2.77 , 91 , 50 , "中度污染" ] ,
[ 29 , 134 , 96 , 165 , 2.76 , 83 , 41 , "轻度污染" ] ,
[ 30 , 52 , 24 , 60 , 1.03 , 50 , 21 , "良" ] ,
[ 31 , 46 , 5 , 49 , 0.28 , 10 , 6 , "优" ]
] ;
var dataGZ= [
[ 1 , 26 , 37 , 27 , 1.163 , 27 , 13 , "优" ] ,
[ 2 , 85 , 62 , 71 , 1.195 , 60 , 8 , "良" ] ,
[ 3 , 78 , 38 , 74 , 1.363 , 37 , 7 , "良" ] ,
[ 4 , 21 , 21 , 36 , 0.634 , 40 , 9 , "优" ] ,
[ 5 , 41 , 42 , 46 , 0.915 , 81 , 13 , "优" ] ,
[ 6 , 56 , 52 , 69 , 1.067 , 92 , 16 , "良" ] ,
[ 7 , 64 , 30 , 28 , 0.924 , 51 , 2 , "良" ] ,
[ 8 , 55 , 48 , 74 , 1.236 , 75 , 26 , "良" ] ,
[ 9 , 76 , 85 , 113 , 1.237 , 114 , 27 , "良" ] ,
[ 10 , 91 , 81 , 104 , 1.041 , 56 , 40 , "良" ] ,
[ 11 , 84 , 39 , 60 , 0.964 , 25 , 11 , "良" ] ,
[ 12 , 64 , 51 , 101 , 0.862 , 58 , 23 , "良" ] ,
[ 13 , 70 , 69 , 120 , 1.198 , 65 , 36 , "良" ] ,
[ 14 , 77 , 105 , 178 , 2.549 , 64 , 16 , "良" ] ,
[ 15 , 109 , 68 , 87 , 0.996 , 74 , 29 , "轻度污染" ] ,
[ 16 , 73 , 68 , 97 , 0.905 , 51 , 34 , "良" ] ,
[ 17 , 54 , 27 , 47 , 0.592 , 53 , 12 , "良" ] ,
[ 18 , 51 , 61 , 97 , 0.811 , 65 , 19 , "良" ] ,
[ 19 , 91 , 71 , 121 , 1.374 , 43 , 18 , "良" ] ,
[ 20 , 73 , 102 , 182 , 2.787 , 44 , 19 , "良" ] ,
[ 21 , 73 , 50 , 76 , 0.717 , 31 , 20 , "良" ] ,
[ 22 , 84 , 94 , 140 , 2.238 , 68 , 18 , "良" ] ,
[ 23 , 93 , 77 , 104 , 1.165 , 53 , 7 , "良" ] ,
[ 24 , 99 , 130 , 227 , 3.97 , 55 , 15 , "良" ] ,
[ 25 , 146 , 84 , 139 , 1.094 , 40 , 17 , "轻度污染" ] ,
[ 26 , 113 , 108 , 137 , 1.481 , 48 , 15 , "轻度污染" ] ,
[ 27 , 81 , 48 , 62 , 1.619 , 26 , 3 , "良" ] ,
[ 28 , 56 , 48 , 68 , 1.336 , 37 , 9 , "良" ] ,
[ 29 , 82 , 92 , 174 , 3.29 , 0 , 13 , "良" ] ,
[ 30 , 106 , 116 , 188 , 3.628 , 101 , 16 , "轻度污染" ] ,
[ 31 , 118 , 50 , 0 , 1.383 , 76 , 11 , "轻度污染" ]
] ;
var dataSH= [
[ 1 , 91 , 45 , 125 , 0.82 , 34 , 23 , "良" ] ,
[ 2 , 65 , 27 , 78 , 0.86 , 45 , 29 , "良" ] ,
[ 3 , 83 , 60 , 84 , 1.09 , 73 , 27 , "良" ] ,
[ 4 , 109 , 81 , 121 , 1.28 , 68 , 51 , "轻度污染" ] ,
[ 5 , 106 , 77 , 114 , 1.07 , 55 , 51 , "轻度污染" ] ,
[ 6 , 109 , 81 , 121 , 1.28 , 68 , 51 , "轻度污染" ] ,
[ 7 , 106 , 77 , 114 , 1.07 , 55 , 51 , "轻度污染" ] ,
[ 8 , 89 , 65 , 78 , 0.86 , 51 , 26 , "良" ] ,
[ 9 , 53 , 33 , 47 , 0.64 , 50 , 17 , "良" ] ,
[ 10 , 80 , 55 , 80 , 1.01 , 75 , 24 , "良" ] ,
[ 11 , 117 , 81 , 124 , 1.03 , 45 , 24 , "轻度污染" ] ,
[ 12 , 99 , 71 , 142 , 1.1 , 62 , 42 , "良" ] ,
[ 13 , 95 , 69 , 130 , 1.28 , 74 , 50 , "良" ] ,
[ 14 , 116 , 87 , 131 , 1.47 , 84 , 40 , "轻度污染" ] ,
[ 15 , 108 , 80 , 121 , 1.3 , 85 , 37 , "轻度污染" ] ,
[ 16 , 134 , 83 , 167 , 1.16 , 57 , 43 , "轻度污染" ] ,
[ 17 , 79 , 43 , 107 , 1.05 , 59 , 37 , "良" ] ,
[ 18 , 71 , 46 , 89 , 0.86 , 64 , 25 , "良" ] ,
[ 19 , 97 , 71 , 113 , 1.17 , 88 , 31 , "良" ] ,
[ 20 , 84 , 57 , 91 , 0.85 , 55 , 31 , "良" ] ,
[ 21 , 87 , 63 , 101 , 0.9 , 56 , 41 , "良" ] ,
[ 22 , 104 , 77 , 119 , 1.09 , 73 , 48 , "轻度污染" ] ,
[ 23 , 87 , 62 , 100 , 1 , 72 , 28 , "良" ] ,
[ 24 , 168 , 128 , 172 , 1.49 , 97 , 56 , "中度污染" ] ,
[ 25 , 65 , 45 , 51 , 0.74 , 39 , 17 , "良" ] ,
[ 26 , 39 , 24 , 38 , 0.61 , 47 , 17 , "优" ] ,
[ 27 , 39 , 24 , 39 , 0.59 , 50 , 19 , "优" ] ,
[ 28 , 93 , 68 , 96 , 1.05 , 79 , 29 , "良" ] ,
[ 29 , 188 , 143 , 197 , 1.66 , 99 , 51 , "中度污染" ] ,
[ 30 , 174 , 131 , 174 , 1.55 , 108 , 50 , "中度污染" ] ,
[ 31 , 187 , 143 , 201 , 1.39 , 89 , 53 , "中度污染" ]
] ;
var schema= [
{ name : 'date' , index : 0 , text : '日' } ,
{ name : 'AQIindex' , index : 1 , text : 'AQI指数' } ,
{ name : 'PM25' , index : 2 , text : 'PM2.5' } ,
{ name : 'PM10' , index : 3 , text : 'PM10' } ,
{ name : 'CO' , index : 4 , text : '一氧化碳(CO)' } ,
{ name : 'NO2' , index : 5 , text : '二氧化氮(NO2)' } ,
{ name : 'SO2' , index : 6 , text : '二氧化硫(SO2)' }
] ;
var itemStyle= {
normal : {
opacity : 0.8 ,
shadowBlur : 10 ,
shadowOffsetX : 0 ,
shadowOffsetY : 0 ,
shadowColor : 'rgba(0,0,0,0.5)' }
} ;
option= {
backgroundColor : '#333' ,
color : [ '#dd4444' , '#fec42c' , '#80F1BE' ] ,
legend : {
y : 'top' ,
data : [ '北京' , '上海' , '广州' ] ,
textStyle : { color : '#fff' , fontSize : 16 }
} ,
grid : { x : '10%' , x2 : 150 , y : '18%' , y2 : '10%' } ,
tooltip : {
padding : 10 ,
backgroundColor : '#222' ,
borderColor : '#777' ,
borderWidth : 1 ,
formatter : function ( obj ) {
var value= obj. value;
return '<div style="border-bottom:1px solid rgba(255,255,255,.3);font-size:18px;padding-bottom:7px;margin-bottom:7px">' +
obj. seriesName+ '' + value[ 0 ] + '日:' + value[ 7 ] + '</div>' + schema[ 1 ] . text+
':' + value[ 1 ] + '<br>' + schema[ 2 ] . text+ ':' + value[ 2 ] + '<br>' + schema[ 3 ] . text+ ':' +
value[ 3 ] + '<br>' + schema[ 4 ] . text+ ':' + value[ 4 ] + '<br>' +
schema[ 5 ] . text+ ':' + value[ 5 ] + '<br>' + schema[ 6 ] . text+ ':' + value[ 6 ] + '<br>' ;
}
} ,
xAxis : {
type : 'value' ,
name : '日期' ,
nameGap : 16 ,
nameTextStyle : {
color : '#fff' ,
fontSize : 14
} ,
max : 31 ,
splitLine : { show : false } ,
axisLine : { lineStyle : { color : '#777' } } ,
axisTick : { lineStyle : { color : '#777' } } ,
axisLabel : { formatter : '{value}' , textStyle : { color : '#fff' } }
} ,
yAxis : {
type : 'value' ,
name : 'AQI指数' ,
nameLocation : 'end' ,
nameGap : 20 ,
nameTextStyle : {
color : '#fff' ,
fontSize : 16 } ,
axisLine : { lineStyle : { color : '#777' } } ,
axisTick : { lineStyle : { color : '#777' } } ,
splitLine : { show : false } ,
axisLabel : { textStyle : { color : '#fff' } }
} ,
visualMap : [ {
left : 'right' ,
top : '10%' ,
dimension : 2 ,
min : 0 ,
max : 250 ,
itemWidth : 30 ,
itemHeight : 120 ,
calculable : true ,
precision : 0.1 ,
text : [ '圆形大小:PM2.5' ] ,
textGap : 30 ,
textStyle : { color : '#fff' } ,
inRange : { symbolSize : [ 10 , 70 ] } ,
outOfRange : { symbolSize : [ 10 , 70 ] ,
color : [ 'rgba(255,255,255,.2)' ] } ,
controller : {
inRange : { color : [ '#c23531' ] } ,
outOfRange : { color : [ '#444' ] }
}
} , {
left : 'right' ,
bottom : '5%' ,
dimension : 6 ,
min : 0 ,
max : 50 ,
itemHeight : 120 ,
calculable : true ,
precision : 0.1 ,
text : [ '明暗:二氧化硫' ] ,
textGap : 30 ,
textStyle : { color : '#fff' } ,
inRange : { colorLightness : [ 1 , 0.5 ] } ,
outOfRange : { color : [ 'rgba(255,255,255,.2)' ] } ,
controller : {
inRange : { color : [ '#c23531' ] } ,
outOfRange : { color : [ '#444' ] }
} } ] ,
series : [ {
name : '北京' ,
type : 'scatter' ,
itemStyle : itemStyle,
data : dataBJ
} , {
name : '上海' ,
type : 'scatter' ,
itemStyle : itemStyle,
data : dataSH
} , {
name : '广州' ,
type : 'scatter' ,
itemStyle : itemStyle,
data : dataGZ
}
] } ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
11.多坐标轴
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> yaxis多坐标轴</ title>
< script src = " js/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart= echarts. init ( document. getElementById ( 'main' ) ) ;
option= {
tooltip : {
trigger : 'axis'
} ,
toolbox : {
feature : {
dataView : {
show : true ,
readOnly : false
} ,
magicType : {
show : true ,
type : [ 'line' , 'bar' ]
} ,
restore : { show : true } ,
saveAsImage : { show : true }
}
} ,
legend : {
data : [ '蒸发量' , '降水量' , '平均温度' ]
} ,
xAxis : [
{
type : 'category' ,
data : [ '1月' , '2月' , '3月' , '4月' , '5月' , '6月' , '7月' , '8月' , '9月' , '10月' , '11月' , '12月' ]
}
] ,
yAxis : [
{
type : 'value' ,
name : '水量' ,
min : 0 ,
max : 250 ,
interval : 50 ,
axisLabel : { formatter : '{value}ml' }
} ,
{
type : 'value' ,
name : '温度' ,
min : 0 ,
max : 25 ,
interval : 5 ,
axisLabel : { formatter : '{value}°C' }
}
] ,
series : [
{
name : '蒸发量' ,
type : 'bar' ,
data : [ 2.0 , 4.9 , 7.0 , 23.2 , 25.6 , 76.7 , 135.6 , 162.2 , 32.6 , 20.0 , 6.4 , 3.3 ]
} ,
{
name : '降水量' ,
type : 'bar' ,
data : [ 2.6 , 5.9 , 9.0 , 26.4 , 28.7 , 70.7 , 175.6 , 182.2 , 48.7 , 18.8 , 6.0 , 2.3 ]
} , {
name : '平均温度' ,
type : 'line' ,
yAxisIndex : 1 ,
data : [ 2.0 , 2.2 , 3.3 , 4.5 , 6.3 , 10.2 , 20.3 , 23.4 , 23.0 , 16.5 , 12.0 , 6.2 ]
}
]
} ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
12.K线图
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> K线图</ title>
< script src = " js/echarts.min.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
var data0 = splitData ( [
[ '2013/1/24' , 2320.26 , 2320.26 , 2287.3 , 2362.94 ] ,
[ '2013/1/25' , 2300 , 2291.3 , 2288.26 , 2308.38 ] ,
[ '2013/1/28' , 2295.35 , 2346.5 , 2295.35 , 2346.92 ] ,
[ '2013/1/29' , 2347.22 , 2358.98 , 2337.35 , 2363.8 ] ,
[ '2013/1/30' , 2360.75 , 2382.48 , 2347.89 , 2383.76 ] ,
[ '2013/1/31' , 2383.43 , 2385.42 , 2371.23 , 2391.82 ] ,
[ '2013/2/1' , 2377.41 , 2419.02 , 2369.57 , 2421.15 ] ,
[ '2013/2/4' , 2425.92 , 2428.15 , 2417.58 , 2440.38 ] ,
[ '2013/2/5' , 2411 , 2433.13 , 2403.3 , 2437.42 ] ,
[ '2013/2/6' , 2432.68 , 2434.48 , 2427.7 , 2441.73 ] ,
[ '2013/2/7' , 2430.69 , 2418.53 , 2394.22 , 2433.89 ] ,
[ '2013/2/8' , 2416.62 , 2432.4 , 2414.4 , 2443.03 ] ,
[ '2013/2/18' , 2441.91 , 2421.56 , 2415.43 , 2444.8 ] ,
[ '2013/2/19' , 2420.26 , 2382.91 , 2373.53 , 2427.07 ] ,
[ '2013/2/20' , 2383.49 , 2397.18 , 2370.61 , 2397.94 ] ,
[ '2013/2/21' , 2378.82 , 2325.95 , 2309.17 , 2378.82 ] ,
[ '2013/2/22' , 2322.94 , 2314.16 , 2308.76 , 2330.88 ] ,
[ '2013/2/25' , 2320.62 , 2325.82 , 2315.01 , 2338.78 ] ,
[ '2013/2/26' , 2313.74 , 2293.34 , 2289.89 , 2340.71 ] ,
[ '2013/2/27' , 2297.77 , 2313.22 , 2292.03 , 2324.63 ] ,
[ '2013/2/28' , 2322.32 , 2365.59 , 2308.92 , 2366.16 ] ,
[ '2013/3/1' , 2364.54 , 2359.51 , 2330.86 , 2369.65 ] ,
[ '2013/3/4' , 2332.08 , 2273.4 , 2259.25 , 2333.54 ] ,
[ '2013/3/5' , 2274.81 , 2326.31 , 2270.1 , 2328.14 ] ,
[ '2013/3/6' , 2333.61 , 2347.18 , 2321.6 , 2351.44 ] ,
[ '2013/3/7' , 2340.44 , 2324.29 , 2304.27 , 2352.02 ] ,
[ '2013/3/8' , 2326.42 , 2318.61 , 2314.59 , 2333.67 ] ,
[ '2013/3/11' , 2314.68 , 2310.59 , 2296.58 , 2320.96 ] ,
[ '2013/3/12' , 2309.16 , 2286.6 , 2264.83 , 2333.29 ] ,
[ '2013/3/13' , 2282.17 , 2263.97 , 2253.25 , 2286.33 ] ,
[ '2013/3/14' , 2255.77 , 2270.28 , 2253.31 , 2276.22 ] ,
[ '2013/3/15' , 2269.31 , 2278.4 , 2250 , 2312.08 ] ,
[ '2013/3/18' , 2267.29 , 2240.02 , 2239.21 , 2276.05 ] ,
[ '2013/3/19' , 2244.26 , 2257.43 , 2232.02 , 2261.31 ] ,
[ '2013/3/20' , 2257.74 , 2317.37 , 2257.42 , 2317.86 ] ,
[ '2013/3/21' , 2318.21 , 2324.24 , 2311.6 , 2330.81 ] ,
[ '2013/3/22' , 2321.4 , 2328.28 , 2314.97 , 2332 ] ,
[ '2013/3/25' , 2334.74 , 2326.72 , 2319.91 , 2344.89 ] ,
[ '2013/3/26' , 2318.58 , 2297.67 , 2281.12 , 2319.99 ] ,
[ '2013/3/27' , 2299.38 , 2301.26 , 2289 , 2323.48 ] ,
[ '2013/3/28' , 2273.55 , 2236.3 , 2232.91 , 2273.55 ] ,
[ '2013/3/29' , 2238.49 , 2236.62 , 2228.81 , 2246.87 ] ,
[ '2013/4/1' , 2229.46 , 2234.4 , 2227.31 , 2243.95 ] ,
[ '2013/4/2' , 2234.9 , 2227.74 , 2220.44 , 2253.42 ] ,
[ '2013/4/3' , 2232.69 , 2225.29 , 2217.25 , 2241.34 ] ,
[ '2013/4/8' , 2196.24 , 2211.59 , 2180.67 , 2212.59 ] ,
[ '2013/4/9' , 2215.47 , 2225.77 , 2215.47 , 2234.73 ] ,
[ '2013/4/10' , 2224.93 , 2226.13 , 2212.56 , 2233.04 ] ,
[ '2013/4/11' , 2236.98 , 2219.55 , 2217.26 , 2242.48 ] ,
[ '2013/4/12' , 2218.09 , 2206.78 , 2204.44 , 2226.26 ] ,
[ '2013/4/15' , 2199.91 , 2181.94 , 2177.39 , 2204.99 ] ,
[ '2013/4/16' , 2169.63 , 2194.85 , 2165.78 , 2196.43 ] ,
[ '2013/4/17' , 2195.03 , 2193.8 , 2178.47 , 2197.51 ] ,
[ '2013/4/18' , 2181.82 , 2197.6 , 2175.44 , 2206.03 ] ,
[ '2013/4/19' , 2201.12 , 2244.64 , 2200.58 , 2250.11 ] ,
[ '2013/4/22' , 2236.4 , 2242.17 , 2232.26 , 2245.12 ] ,
[ '2013/4/23' , 2242.62 , 2184.54 , 2182.81 , 2242.62 ] ,
[ '2013/4/24' , 2187.35 , 2218.32 , 2184.11 , 2226.12 ] ,
[ '2013/4/25' , 2213.19 , 2199.31 , 2191.85 , 2224.63 ] ,
[ '2013/4/26' , 2203.89 , 2177.91 , 2173.86 , 2210.58 ] ,
[ '2013/5/2' , 2170.78 , 2174.12 , 2161.14 , 2179.65 ] ,
[ '2013/5/3' , 2179.05 , 2205.5 , 2179.05 , 2222.81 ] ,
[ '2013/5/6' , 2212.5 , 2231.17 , 2212.5 , 2236.07 ] ,
[ '2013/5/7' , 2227.86 , 2235.57 , 2219.44 , 2240.26 ] ,
[ '2013/5/8' , 2242.39 , 2246.3 , 2235.42 , 2255.21 ] ,
[ '2013/5/9' , 2246.96 , 2232.97 , 2221.38 , 2247.86 ] ,
[ '2013/5/10' , 2228.82 , 2246.83 , 2225.81 , 2247.67 ] ,
[ '2013/5/13' , 2247.68 , 2241.92 , 2231.36 , 2250.85 ] ,
[ '2013/5/14' , 2238.9 , 2217.01 , 2205.87 , 2239.93 ] ,
[ '2013/5/15' , 2217.09 , 2224.8 , 2213.58 , 2225.19 ] ,
[ '2013/5/16' , 2221.34 , 2251.81 , 2210.77 , 2252.87 ] ,
[ '2013/5/17' , 2249.81 , 2282.87 , 2248.41 , 2288.09 ] ,
[ '2013/5/20' , 2286.33 , 2299.99 , 2281.9 , 2309.39 ] ,
[ '2013/5/21' , 2297.11 , 2305.11 , 2290.12 , 2305.3 ] ,
[ '2013/5/22' , 2303.75 , 2302.4 , 2292.43 , 2314.18 ] ,
[ '2013/5/23' , 2293.81 , 2275.67 , 2274.1 , 2304.95 ] ,
[ '2013/5/24' , 2281.45 , 2288.53 , 2270.25 , 2292.59 ] ,
[ '2013/5/27' , 2286.66 , 2293.08 , 2283.94 , 2301.7 ] ,
[ '2013/5/28' , 2293.4 , 2321.32 , 2281.47 , 2322.1 ] ,
[ '2013/5/29' , 2323.54 , 2324.02 , 2321.17 , 2334.33 ] ,
[ '2013/5/30' , 2316.25 , 2317.75 , 2310.49 , 2325.72 ] ,
[ '2013/5/31' , 2320.74 , 2300.59 , 2299.37 , 2325.53 ] ,
[ '2013/6/3' , 2300.21 , 2299.25 , 2294.11 , 2313.43 ] ,
[ '2013/6/4' , 2297.1 , 2272.42 , 2264.76 , 2297.1 ] ,
[ '2013/6/5' , 2270.71 , 2270.93 , 2260.87 , 2276.86 ] ,
[ '2013/6/6' , 2264.43 , 2242.11 , 2240.07 , 2266.69 ] ,
[ '2013/6/7' , 2242.26 , 2210.9 , 2205.07 , 2250.63 ] ,
[ '2013/6/13' , 2190.1 , 2148.35 , 2126.22 , 2190.1 ] ] ) ;
function splitData ( rawData ) {
var categoryData = [ ] ;
var values = [ ] ;
for ( var i = 0 ; i < rawData. length; i++ ) {
categoryData. push ( rawData[ i] . splice ( 0 , 1 ) [ 0 ] ) ;
values. push ( rawData[ i] )
}
return {
categoryData : categoryData,
values : values
} ;
}
function calculateMA ( dayCount ) {
var result = [ ] ;
for ( var i = 0 , len = data0. values. length; i < len; i++ ) {
if ( i < dayCount) {
result. push ( '-' ) ;
continue ;
}
var sum = 0 ;
for ( var j = 0 ; j < dayCount; j++ ) {
sum += data0. values[ i - j] [ 1 ] ;
}
result. push ( sum / dayCount) ;
}
return result;
}
option = {
title : {
text : '上证指数' ,
left : 0
} ,
tooltip : {
trigger : 'axis' ,
axisPointer : {
type : 'line'
}
} ,
legend : {
data : [ '日K' , 'MA5' , 'MA10' , 'MA20' , 'MA30' ]
} ,
grid : {
left : '10%' ,
right : '10%' ,
bottom : '15%'
} ,
xAxis : {
type : 'category' ,
data : data0. categoryData,
scale : true ,
boundaryGap : false ,
axisLine : {
onZero : false
} ,
splitLine : {
show : false
} ,
splitNumber : 20 ,
min : 'dataMin' ,
max : 'dataMax'
} ,
yAxis : {
scale : true ,
splitArea : {
show : true
}
} ,
dataZoom : [ {
type : 'inside' ,
start : 50 ,
end : 100
} , {
show : true ,
type : 'slider' ,
y : '90%' ,
start : 50 ,
end : 100
} ] ,
series : [
{
name : '日K' ,
type : 'candlestick' ,
data : data0. values,
markPoint : {
label : {
normal : {
formatter : function ( param ) {
return param != null ? Math
. round ( param. value) : '' ;
}
}
} ,
data : [ {
name : 'XX标点' ,
coord : [ '2013/5/31' , 2300 ] ,
value : 2300 ,
itemStyle : {
normal : {
color : 'rgb(41,60,85)'
}
}
} , {
name : 'highestvalue' ,
type : 'max' ,
valueDim : 'highest'
} , {
name : 'lowestvalue' ,
type : 'min' ,
valueDim : 'lowest'
} , {
name : 'averagevalueonclose' ,
type : 'average' ,
valueDim : 'close'
} ] ,
tooltip : {
formatter : function ( param ) {
return param. name + '<br>'
+ ( param. data. coord || '' ) ;
}
}
} ,
markLine : {
symbol : [ 'none' , 'none' ] ,
data : [ [ {
name : 'fromlowesttohighest' ,
type : 'min' ,
valueDim : 'lowest' ,
symbol : 'circle' ,
symbolSize : 10 ,
label : {
normal : {
show : false
} ,
emphasis : {
show : false
}
}
} , {
type : 'max' ,
valueDim : 'highest' ,
symbol : 'circle' ,
symbolSize : 10 ,
label : {
normal : {
show : false
} ,
emphasis : {
show : false
}
}
} ] , {
name : 'minlineonclose' ,
type : 'min' ,
valueDim : 'close'
} , {
name : 'maxlineonclose' ,
type : 'max' ,
valueDim : 'close'
} ]
}
} , {
name : 'MA5' ,
type : 'line' ,
data : calculateMA ( 5 ) ,
smooth : true ,
lineStyle : {
normal : {
opacity : 0.5
}
}
} , {
name : 'MA10' ,
type : 'line' ,
data : calculateMA ( 10 ) ,
smooth : true ,
lineStyle : {
normal : {
opacity : 0.5
}
}
} , {
name : 'MA20' ,
type : 'line' ,
data : calculateMA ( 20 ) ,
smooth : true ,
lineStyle : {
normal : {
opacity : 0.5
}
}
} , {
name : 'MA30' ,
type : 'line' ,
data : calculateMA ( 30 ) ,
smooth : true ,
lineStyle : {
normal : {
opacity : 0.5
}
}
} , ]
} ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
13.map地图
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> map地图</ title>
< script src = " js/echarts.min.js" > </ script>
< script src = " js/china.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
var geoCoordMap = {
'上海' : [ 121.4648 , 31.2891 ] ,
'东莞' : [ 113.8953 , 22.901 ] ,
'东营' : [ 118.7073 , 37.5513 ] ,
'中山' : [ 113.4229 , 22.478 ] ,
'临汾' : [ 111.4783 , 36.1615 ] ,
'临沂' : [ 118.3118 , 35.2936 ] ,
'丹东' : [ 124.541 , 40.4242 ] ,
'丽水' : [ 119.5642 , 28.1854 ] ,
'乌鲁木齐' : [ 87.9236 , 43.5883 ] ,
'佛山' : [ 112.8955 , 23.1097 ] ,
'保定' : [ 115.0488 , 39.0948 ] ,
'兰州' : [ 103.5901 , 36.3043 ] ,
'包头' : [ 110.3467 , 41.4899 ] ,
'北京' : [ 116.4551 , 40.2539 ] ,
'北海' : [ 109.314 , 21.6211 ] ,
'南京' : [ 118.8062 , 31.9208 ] ,
'南宁' : [ 108.479 , 23.1152 ] ,
'南昌' : [ 116.0046 , 28.6633 ] ,
'南通' : [ 121.1023 , 32.1625 ] ,
'厦门' : [ 118.1689 , 24.6478 ] ,
'台州' : [ 121.1353 , 28.6688 ] ,
'合肥' : [ 117.29 , 32.0581 ] ,
'呼和浩特' : [ 111.4124 , 40.4901 ] ,
'咸阳' : [ 108.4131 , 34.8706 ] ,
'哈尔滨' : [ 127.9688 , 45.368 ] ,
'唐山' : [ 118.4766 , 39.6826 ] ,
'嘉兴' : [ 120.9155 , 30.6354 ] ,
'大同' : [ 113.7854 , 39.8035 ] ,
'大连' : [ 122.2229 , 39.4409 ] ,
'天津' : [ 117.4219 , 39.4189 ] ,
'太原' : [ 112.3352 , 37.9413 ] ,
'威海' : [ 121.9482 , 37.1393 ] ,
'宁波' : [ 121.5967 , 29.6466 ] ,
'宝鸡' : [ 107.1826 , 34.3433 ] ,
'宿迁' : [ 118.5535 , 33.7775 ] ,
'常州' : [ 119.4543 , 31.5582 ] ,
'广州' : [ 113.5107 , 23.2196 ] ,
'廊坊' : [ 116.521 , 39.0509 ] ,
'延安' : [ 109.1052 , 36.4252 ] ,
'张家口' : [ 115.1477 , 40.8527 ] ,
'徐州' : [ 117.5208 , 34.3268 ] ,
'德州' : [ 116.6858 , 37.2107 ] ,
'惠州' : [ 114.6204 , 23.1647 ] ,
'成都' : [ 103.9526 , 30.7617 ] ,
'扬州' : [ 119.4653 , 32.8162 ] ,
'承德' : [ 117.5757 , 41.4075 ] ,
'拉萨' : [ 91.1865 , 30.1465 ] ,
'无锡' : [ 120.3442 , 31.5527 ] ,
'日照' : [ 119.2786 , 35.5023 ] ,
'昆明' : [ 102.9199 , 25.4663 ] ,
'杭州' : [ 119.5313 , 29.8773 ] ,
'枣庄' : [ 117.323 , 34.8926 ] ,
'柳州' : [ 109.3799 , 24.9774 ] ,
'株洲' : [ 113.5327 , 27.0319 ] ,
'武汉' : [ 114.3896 , 30.6628 ] ,
'汕头' : [ 117.1692 , 23.3405 ] ,
'江门' : [ 112.6318 , 22.1484 ] ,
'沈阳' : [ 123.1238 , 42.1216 ] ,
'沧州' : [ 116.8286 , 38.2104 ] ,
'河源' : [ 114.917 , 23.9722 ] ,
'泉州' : [ 118.3228 , 25.1147 ] ,
'泰安' : [ 117.0264 , 36.0516 ] ,
'泰州' : [ 120.0586 , 32.5525 ] ,
'济南' : [ 117.1582 , 36.8701 ] ,
'济宁' : [ 116.8286 , 35.3375 ] ,
'海口' : [ 110.3893 , 19.8516 ] ,
'淄博' : [ 118.0371 , 36.6064 ] ,
'淮安' : [ 118.927 , 33.4039 ] ,
'深圳' : [ 114.5435 , 22.5439 ] ,
'清远' : [ 112.9175 , 24.3292 ] ,
'温州' : [ 120.498 , 27.8119 ] ,
'渭南' : [ 109.7864 , 35.0299 ] ,
'湖州' : [ 119.8608 , 30.7782 ] ,
'湘潭' : [ 112.5439 , 27.7075 ] ,
'滨州' : [ 117.8174 , 37.4963 ] ,
'潍坊' : [ 119.0918 , 36.524 ] ,
'烟台' : [ 120.7397 , 37.5128 ] ,
'玉溪' : [ 101.9312 , 23.8898 ] ,
'珠海' : [ 113.7305 , 22.1155 ] ,
'盐城' : [ 120.2234 , 33.5577 ] ,
'盘锦' : [ 121.9482 , 41.0449 ] ,
'石家庄' : [ 114.4995 , 38.1006 ] ,
'福州' : [ 119.4543 , 25.9222 ] ,
'秦皇岛' : [ 119.2126 , 40.0232 ] ,
'绍兴' : [ 120.564 , 29.7565 ] ,
'聊城' : [ 115.9167 , 36.4032 ] ,
'肇庆' : [ 112.1265 , 23.5822 ] ,
'舟山' : [ 122.2559 , 30.2234 ] ,
'苏州' : [ 120.6519 , 31.3989 ] ,
'莱芜' : [ 117.6526 , 36.2714 ] ,
'菏泽' : [ 115.6201 , 35.2057 ] ,
'营口' : [ 122.4316 , 40.4297 ] ,
'葫芦岛' : [ 120.1575 , 40.578 ] ,
'衡水' : [ 115.8838 , 37.7161 ] ,
'衢州' : [ 118.6853 , 28.8666 ] ,
'西宁' : [ 101.4038 , 36.8207 ] ,
'西安' : [ 109.1162 , 34.2004 ] ,
'贵阳' : [ 106.6992 , 26.7682 ] ,
'连云港' : [ 119.1248 , 34.552 ] ,
'邢台' : [ 114.8071 , 37.2821 ] ,
'邯郸' : [ 114.4775 , 36.535 ] ,
'郑州' : [ 113.4668 , 34.6234 ] ,
'鄂尔多斯' : [ 108.9734 , 39.2487 ] ,
'重庆' : [ 107.7539 , 30.1904 ] ,
'金华' : [ 120.0037 , 29.1028 ] ,
'铜川' : [ 109.0393 , 35.1947 ] ,
'银川' : [ 106.3586 , 38.1775 ] ,
'镇江' : [ 119.4763 , 31.9702 ] ,
'长春' : [ 125.8154 , 44.2584 ] ,
'长沙' : [ 113.0823 , 28.2568 ] ,
'长治' : [ 112.8625 , 36.4746 ] ,
'阳泉' : [ 113.4778 , 38.0951 ] ,
'青岛' : [ 120.4651 , 36.3373 ] ,
'韶关' : [ 113.7964 , 24.7028 ]
} ;
var BJData = [
[
{
name : '北京'
} ,
{
name : '上海' ,
value : 95
}
] ,
[ {
name : '北京'
} , {
name : '广州' ,
value : 90
} ] , [ {
name : '北京'
} , {
name : '大连' ,
value : 80
} ] , [ {
name : '北京'
} , {
name : '南宁' ,
value : 70
} ] , [ {
name : '北京'
} , {
name : '南昌' ,
value : 60
} ] , [ {
name : '北京'
} , {
name : '拉萨' ,
value : 50
} ] , [ {
name : '北京'
} , {
name : '长春' ,
value : 40
} ] , [ {
name : '北京'
} , {
name : '包头' ,
value : 30
} ] , [ {
name : '北京'
} , {
name : '重庆' ,
value : 20
} ] , [ {
name : '北京'
} , {
name : '常州' ,
value : 10
} ] ] ;
var SHData = [ [ {
name : '上海'
} , {
name : '包头' ,
value : 95
} ] , [ {
name : '上海'
} , {
name : '昆明' ,
value : 90
} ] , [ {
name : '上海'
} , {
name : '广州' ,
value : 80
} ] , [ {
name : '上海'
} , {
name : '郑州' ,
value : 70
} ] , [ {
name : '上海'
} , {
name : '长春' ,
value : 60
} ] , [ {
name : '上海'
} , {
name : '重庆' ,
value : 50
} ] , [ {
name : '上海'
} , {
name : '长沙' ,
value : 40
} ] , [ {
name : '上海'
} , {
name : '北京' ,
value : 30
} ] , [ {
name : '上海'
} , {
name : '丹东' ,
value : 20
} ] , [ {
name : '上海'
} , {
name : '大连' ,
value : 10
} ] ] ;
var GZData = [ [ {
name : '广州'
} , {
name : '福州' ,
value : 95
} ] , [ {
name : '广州'
} , {
name : '太原' ,
value : 90
} ] , [ {
name : '广州'
} , {
name : '长春' ,
value : 80
} ] , [ {
name : '广州'
} , {
name : '重庆' ,
value : 70
} ] , [ {
name : '广州'
} , {
name : '西安' ,
value : 60
} ] , [ {
name : '广州'
} , {
name : '成都' ,
value : 50
} ] , [ {
name : '广州'
} , {
name : '常州' ,
value : 40
} ] , [ {
name : '广州'
} , {
name : '北京' ,
value : 30
} ] , [ {
name : '广州'
} , {
name : '北海' ,
value : 20
} ] , [ {
name : '广州'
} , {
name : '海口' ,
value : 10
} ] ] ;
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z' ;
var convertData = function ( data ) {
var res = [ ] ;
for ( var i = 0 ; i < data. length; i++ ) {
var dataItem = data[ i] ;
var fromCoord = geoCoordMap[ dataItem[ 0 ] . name] ;
var toCoord = geoCoordMap[ dataItem[ 1 ] . name] ;
if ( fromCoord && toCoord) {
res. push ( [ {
name : dataItem[ 0 ] . name,
coord : fromCoord
} , {
name : dataItem[ 1 ] . name,
coord : toCoord
} ] ) ;
}
}
return res;
} ;
var color = [ '#a6c84c' , '#ffa022' , '#46bee9' ] ;
var series = [ ] ;
[ [ '北京' , BJData ] , [ '上海' , SHData ] , [ '广州' , GZData ] ]
. forEach ( function ( item, i ) {
series. push ( {
name : item[ 0 ] + 'Top10' ,
type : 'lines' ,
zlevel : 1 ,
effect : {
show : true ,
period : 6 ,
trailLength : 0.7 ,
color : '#fff' ,
symbolSize : 3
} ,
lineStyle : {
normal : {
color : color[ i] ,
width : 0 ,
curveness : 0.2
}
} ,
data : convertData ( item[ 1 ] )
} , {
name : item[ 0 ] + 'Top10' ,
type : 'lines' ,
zlevel : 2 ,
effect : {
show : true ,
period : 6 ,
trailLength : 0 ,
symbol : planePath,
symbolSize : 15
} ,
lineStyle : {
normal : { }
} ,
data : convertData ( item[ 1 ] )
} , {
name : item[ 0 ] + 'Top10' ,
type : 'effectScatter' ,
coordinateSystem : 'geo' ,
zlevel : 2 ,
rippleEffect : {
brushType : 'stroke'
} ,
label : {
normal : {
show : true ,
position : 'right' ,
formatter : '{b}'
}
} ,
symbolSize : function ( val ) {
return val[ 2 ] / 8 ;
} ,
itemStyle : {
normal : {
color : color[ i]
}
} ,
data : item[ 1 ] . map ( function ( dataItem ) {
return {
name : dataItem[ 1 ] . name,
value : geoCoordMap[ dataItem[ 1 ] . name]
. concat ( [ dataItem[ 1 ] . value ] )
} ;
} )
} ) ;
} ) ;
option = {
backgroundColor : '#404a59' ,
title : {
text : '模拟迁徙' ,
subtext : '虚拟数据' ,
left : 'center' ,
textStyle : {
color : '#fff'
}
} ,
tooltip : {
trigger : 'item'
} ,
legend : {
orient : 'vertical' ,
top : 'bottom' ,
left : 'right' ,
data : [ '北京Top10' , '上海Top10' , '广州Top10' ] ,
textStyle : {
color : '#fff'
} ,
selectedMode : 'single'
} ,
geo : {
map : 'china' ,
label : {
emphasis : {
show : false
}
} ,
roam : true ,
itemStyle : {
normal : {
areaColor : '#323c48' ,
borderColor : '#404a59'
} ,
emphasis : {
areaColor : '#2a333d'
}
}
} ,
series : series
} ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
14.值域选择
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> dataRange值域选择</ title>
< script src = " js/echarts.min.js" > </ script>
< script src = " js/china.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
var geoCoordMap = {
"海门" : [ 121.15 , 31.89 ] ,
"鄂尔多斯" : [ 109.781327 , 39.608266 ] ,
"招远" : [ 120.38 , 37.35 ] ,
"舟山" : [ 122.207216 , 29.985295 ] ,
"齐齐哈尔" : [ 123.97 , 47.33 ] ,
"盐城" : [ 120.13 , 33.38 ] ,
"赤峰" : [ 118.87 , 42.28 ] ,
"青岛" : [ 120.33 , 36.07 ] ,
"即墨" : [ 120.45 , 36.38 ] ,
"抚顺" : [ 123.97 , 41.97 ] ,
"玉溪" : [ 102.52 , 24.35 ] ,
"张家口" : [ 114.87 , 40.82 ] ,
"阳泉" : [ 113.57 , 37.85 ] ,
"莱州" : [ 119.942327 , 37.177017 ] ,
"湖州" : [ 120.1 , 30.86 ] ,
"汕头" : [ 116.69 , 23.39 ] ,
"昆山" : [ 120.95 , 31.39 ] ,
"宁波" : [ 121.56 , 29.86 ] ,
"湛江" : [ 110.359377 , 21.270708 ] ,
"揭阳" : [ 116.35 , 23.55 ] ,
"荣成" : [ 122.41 , 37.16 ] ,
"连云港" : [ 119.16 , 34.59 ] ,
"葫芦岛" : [ 120.836932 , 40.711052 ] ,
"常熟" : [ 120.74 , 31.64 ] ,
"东莞" : [ 113.75 , 23.04 ] ,
"河源" : [ 114.68 , 23.73 ] ,
"淮安" : [ 119.15 , 33.5 ] ,
"泰州" : [ 119.9 , 32.49 ] ,
"南宁" : [ 108.33 , 22.84 ] ,
"营口" : [ 122.18 , 40.65 ] ,
"惠州" : [ 114.4 , 23.09 ] ,
"江阴" : [ 120.26 , 31.91 ] ,
"蓬莱" : [ 120.75 , 37.8 ] ,
"韶关" : [ 113.62 , 24.84 ] ,
"嘉峪关" : [ 98.289152 , 39.77313 ] ,
"广州" : [ 113.23 , 23.16 ] ,
"延安" : [ 109.47 , 36.6 ] ,
"太原" : [ 112.53 , 37.87 ] ,
"清远" : [ 113.01 , 23.7 ] ,
"中山" : [ 113.38 , 22.52 ] ,
"昆明" : [ 102.73 , 25.04 ] ,
"寿光" : [ 118.73 , 36.86 ] ,
"盘锦" : [ 122.070714 , 41.119997 ] ,
"长治" : [ 113.08 , 36.18 ] ,
"深圳" : [ 114.07 , 22.62 ] ,
"珠海" : [ 113.52 , 22.3 ] ,
"宿迁" : [ 118.3 , 33.96 ] ,
"咸阳" : [ 108.72 , 34.36 ] ,
"铜川" : [ 109.11 , 35.09 ] ,
"平度" : [ 119.97 , 36.77 ] ,
"佛山" : [ 113.11 , 23.05 ] ,
"海口" : [ 110.35 , 20.02 ] ,
"江门" : [ 113.06 , 22.61 ] ,
"章丘" : [ 117.53 , 36.72 ] ,
"肇庆" : [ 112.44 , 23.05 ] ,
"大连" : [ 121.62 , 38.92 ] ,
"临汾" : [ 111.5 , 36.08 ] ,
"吴江" : [ 120.63 , 31.16 ] ,
"石嘴山" : [ 106.39 , 39.04 ] ,
"沈阳" : [ 123.38 , 41.8 ] ,
"苏州" : [ 120.62 , 31.32 ] ,
"茂名" : [ 110.88 , 21.68 ] ,
"嘉兴" : [ 120.76 , 30.77 ] ,
"长春" : [ 125.35 , 43.88 ] ,
"胶州" : [ 120.03336 , 36.264622 ] ,
"银川" : [ 106.27 , 38.47 ] ,
"张家港" : [ 120.555821 , 31.875428 ] ,
"三门峡" : [ 111.19 , 34.76 ] ,
"锦州" : [ 121.15 , 41.13 ] ,
"南昌" : [ 115.89 , 28.68 ] ,
"柳州" : [ 109.4 , 24.33 ] ,
"三亚" : [ 109.511909 , 18.252847 ] ,
"自贡" : [ 104.778442 , 29.33903 ] ,
"吉林" : [ 126.57 , 43.87 ] ,
"阳江" : [ 111.95 , 21.85 ] ,
"泸州" : [ 105.39 , 28.91 ] ,
"西宁" : [ 101.74 , 36.56 ] ,
"宜宾" : [ 104.56 , 29.77 ] ,
"呼和浩特" : [ 111.65 , 40.82 ] ,
"成都" : [ 104.06 , 30.67 ] ,
"马鞍山" : [ 118.48 , 31.56 ] ,
"宝鸡" : [ 107.15 , 34.38 ] ,
"焦作" : [ 113.21 , 35.24 ] ,
"句容" : [ 119.16 , 31.95 ] ,
"北京" : [ 116.46 , 39.92 ] ,
"徐州" : [ 117.2 , 34.26 ] ,
"衡水" : [ 115.72 , 37.72 ] ,
"包头" : [ 110 , 40.58 ] ,
"绵阳" : [ 104.73 , 31.48 ] ,
"乌鲁木齐" : [ 87.68 , 43.77 ] ,
"枣庄" : [ 117.57 , 34.86 ] ,
"杭州" : [ 120.19 , 30.26 ] ,
"淄博" : [ 118.05 , 36.78 ] ,
"鞍山" : [ 122.85 , 41.12 ] ,
"溧阳" : [ 119.48 , 31.43 ] ,
"库尔勒" : [ 86.06 , 41.68 ] ,
"安阳" : [ 114.35 , 36.1 ] ,
"开封" : [ 114.35 , 34.79 ] ,
"济南" : [ 117 , 36.65 ] ,
"德阳" : [ 104.37 , 31.13 ] ,
"温州" : [ 120.65 , 28.01 ] ,
"九江" : [ 115.97 , 29.71 ] ,
"邯郸" : [ 114.47 , 36.6 ] ,
"临安" : [ 119.72 , 30.23 ] ,
"兰州" : [ 103.73 , 36.03 ] ,
"沧州" : [ 116.83 , 38.33 ] ,
"临沂" : [ 118.35 , 35.05 ] ,
"南充" : [ 106.110698 , 30.837793 ] ,
"天津" : [ 117.2 , 39.13 ] ,
"富阳" : [ 119.95 , 30.07 ] ,
"泰安" : [ 117.13 , 36.18 ] ,
"诸暨" : [ 120.23 , 29.71 ] ,
"郑州" : [ 113.65 , 34.76 ] ,
"哈尔滨" : [ 126.63 , 45.75 ] ,
"聊城" : [ 115.97 , 36.45 ] ,
"芜湖" : [ 118.38 , 31.33 ] ,
"唐山" : [ 118.02 , 39.63 ] ,
"平顶山" : [ 113.29 , 33.75 ] ,
"邢台" : [ 114.48 , 37.05 ] ,
"德州" : [ 116.29 , 37.45 ] ,
"济宁" : [ 116.59 , 35.38 ] ,
"荆州" : [ 112.239741 , 30.335165 ] ,
"宜昌" : [ 111.3 , 30.7 ] ,
"义乌" : [ 120.06 , 29.32 ] ,
"丽水" : [ 119.92 , 28.45 ] ,
"洛阳" : [ 112.44 , 34.7 ] ,
"秦皇岛" : [ 119.57 , 39.95 ] ,
"株洲" : [ 113.16 , 27.83 ] ,
"石家庄" : [ 114.48 , 38.03 ] ,
"莱芜" : [ 117.67 , 36.19 ] ,
"常德" : [ 111.69 , 29.05 ] ,
"保定" : [ 115.48 , 38.85 ] ,
"湘潭" : [ 112.91 , 27.87 ] ,
"金华" : [ 119.64 , 29.12 ] ,
"岳阳" : [ 113.09 , 29.37 ] ,
"长沙" : [ 113 , 28.21 ] ,
"衢州" : [ 118.88 , 28.97 ] ,
"廊坊" : [ 116.7 , 39.53 ] ,
"菏泽" : [ 115.480656 , 35.23375 ] ,
"合肥" : [ 117.27 , 31.86 ] ,
"武汉" : [ 114.31 , 30.52 ] ,
"大庆" : [ 125.03 , 46.58 ]
} ;
var convertData = function ( data ) {
var res = [ ] ;
for ( var i = 0 ; i < data. length; i++ ) {
var geoCoord = geoCoordMap[ data[ i] . name] ;
if ( geoCoord) {
res. push ( {
name : data[ i] . name,
value : geoCoord. concat ( data[ i] . value)
} ) ;
}
}
return res;
} ;
option = {
backgroundColor : '#404a59' ,
title : {
text : '全国主要城市空气质量' ,
subtext : 'datafromPM25.in' ,
sublink : 'http://www.pm25.in' ,
x : 'center' ,
textStyle : {
color : '#fff'
}
} ,
tooltip : {
trigger : 'item' ,
formatter : function ( params ) {
return params. name + ':' + params. value[ 2 ] ;
}
} ,
legend : {
orient : 'vertical' ,
y : 'bottom' ,
x : 'right' ,
data : [ 'pm2.5' ] ,
textStyle : {
color : '#fff'
}
} ,
dataRange : {
min : 0 ,
max : 300 ,
calculable : true ,
color : [ '#d94e5d' , '#eac736' , '#50a3ba' ] ,
textStyle : {
color : '#fff'
}
} ,
geo : {
map : 'china' ,
label : {
emphasis : {
show : false
}
} ,
itemStyle : {
normal : {
areaColor : '#323c48' ,
borderColor : '#111'
} ,
emphasis : {
areaColor : '#2a333d'
}
}
} ,
series : [ {
name : 'pm2.5' ,
type : 'scatter' ,
coordinateSystem : 'geo' ,
data : convertData ( [ {
name : "海门" ,
value : 9
} , {
name : "鄂尔多斯" ,
value : 12
} , {
name : "招远" ,
value : 12
} , {
name : "舟山" ,
value : 12
} , {
name : "齐齐哈尔" ,
value : 14
} , {
name : "盐城" ,
value : 15
} , {
name : "赤峰" ,
value : 16
} , {
name : "青岛" ,
value : 18
} , {
name : "乳山" ,
value : 18
} , {
name : "金昌" ,
value : 19
} , {
name : "泉州" ,
value : 21
} , {
name : "莱西" ,
value : 21
} , {
name : "日照" ,
value : 21
} , {
name : "胶南" ,
value : 22
} , {
name : "南通" ,
value : 23
} , {
name : "拉萨" ,
value : 24
} , {
name : "云浮" ,
value : 24
} , {
name : "梅州" ,
value : 25
} , {
name : "文登" ,
value : 25
} , {
name : "上海" ,
value : 25
} , {
name : "攀枝花" ,
value : 25
} , {
name : "威海" ,
value : 25
} , {
name : "承德" ,
value : 25
} , {
name : "厦门" ,
value : 26
} , {
name : "汕尾" ,
value : 26
} , {
name : "潮州" ,
value : 26
} , {
name : "丹东" ,
value : 27
} , {
name : "太仓" ,
value : 27
} , {
name : "曲靖" ,
value : 27
} , {
name : "烟台" ,
value : 28
} , {
name : "福州" ,
value : 29
} , {
name : "瓦房店" ,
value : 30
} , {
name : "即墨" ,
value : 30
} , {
name : "抚顺" ,
value : 31
} , {
name : "玉溪" ,
value : 31
} , {
name : "张家口" ,
value : 31
} , {
name : "阳泉" ,
value : 31
} , {
name : "莱州" ,
value : 32
} , {
name : "湖州" ,
value : 32
} , {
name : "汕头" ,
value : 32
} , {
name : "昆山" ,
value : 33
} , {
name : "宁波" ,
value : 33
} , {
name : "湛江" ,
value : 33
} , {
name : "揭阳" ,
value : 34
} , {
name : "荣成" ,
value : 34
} , {
name : "连云港" ,
value : 35
} , {
name : "葫芦岛" ,
value : 35
} , {
name : "常熟" ,
value : 36
} , {
name : "东莞" ,
value : 36
} , {
name : "河源" ,
value : 36
} , {
name : "淮安" ,
value : 36
} , {
name : "泰州" ,
value : 36
} , {
name : "南宁" ,
value : 37
} , {
name : "营口" ,
value : 37
} , {
name : "惠州" ,
value : 37
} , {
name : "江阴" ,
value : 37
} , {
name : "蓬莱" ,
value : 37
} , {
name : "韶关" ,
value : 38
} , {
name : "嘉峪关" ,
value : 38
} , {
name : "广州" ,
value : 38
} , {
name : "延安" ,
value : 38
} , {
name : "太原" ,
value : 39
} , {
name : "清远" ,
value : 39
} , {
name : "中山" ,
value : 39
} , {
name : "昆明" ,
value : 39
} , {
name : "寿光" ,
value : 40
} , {
name : "盘锦" ,
value : 40
} , {
name : "长治" ,
value : 41
} , {
name : "深圳" ,
value : 41
} , {
name : "珠海" ,
value : 42
} , {
name : "宿迁" ,
value : 43
} , {
name : "咸阳" ,
value : 43
} , {
name : "铜川" ,
value : 44
} , {
name : "平度" ,
value : 44
} , {
name : "佛山" ,
value : 44
} , {
name : "海口" ,
value : 44
} , {
name : "江门" ,
value : 45
} , {
name : "章丘" ,
value : 45
} , {
name : "肇庆" ,
value : 46
} , {
name : "大连" ,
value : 47
} , {
name : "临汾" ,
value : 47
} , {
name : "吴江" ,
value : 47
} , {
name : "石嘴山" ,
value : 49
} , {
name : "沈阳" ,
value : 50
} , {
name : "苏州" ,
value : 50
} , {
name : "茂名" ,
value : 50
} , {
name : "嘉兴" ,
value : 51
} , {
name : "长春" ,
value : 51
} , {
name : "胶州" ,
value : 52
} , {
name : "银川" ,
value : 52
} , {
name : "张家港" ,
value : 52
} , {
name : "三门峡" ,
value : 53
} , {
name : "锦州" ,
value : 54
} , {
name : "南昌" ,
value : 54
} , {
name : "柳州" ,
value : 54
} , {
name : "三亚" ,
value : 54
} , {
name : "自贡" ,
value : 56
} , {
name : "吉林" ,
value : 56
} , {
name : "阳江" ,
value : 57
} , {
name : "泸州" ,
value : 57
} , {
name : "西宁" ,
value : 57
} , {
name : "宜宾" ,
value : 58
} , {
name : "呼和浩特" ,
value : 58
} , {
name : "成都" ,
value : 58
} , {
name : "大同" ,
value : 58
} , {
name : "镇江" ,
value : 59
} , {
name : "桂林" ,
value : 59
} , {
name : "张家界" ,
value : 59
} , {
name : "宜兴" ,
value : 59
} , {
name : "北海" ,
value : 60
} , {
name : "西安" ,
value : 61
} , {
name : "金坛" ,
value : 62
} , {
name : "东营" ,
value : 62
} , {
name : "牡丹江" ,
value : 63
} , {
name : "遵义" ,
value : 63
} , {
name : "绍兴" ,
value : 63
} , {
name : "扬州" ,
value : 64
} , {
name : "常州" ,
value : 64
} , {
name : "潍坊" ,
value : 65
} , {
name : "重庆" ,
value : 66
} , {
name : "台州" ,
value : 67
} , {
name : "南京" ,
value : 67
} , {
name : "滨州" ,
value : 70
} , {
name : "贵阳" ,
value : 71
} , {
name : "无锡" ,
value : 71
} , {
name : "本溪" ,
value : 71
} , {
name : "克拉玛依" ,
value : 72
} , {
name : "渭南" ,
value : 72
} , {
name : "马鞍山" ,
value : 72
} , {
name : "宝鸡" ,
value : 72
} , {
name : "焦作" ,
value : 75
} , {
name : "句容" ,
value : 75
} , {
name : "北京" ,
value : 79
} , {
name : "徐州" ,
value : 79
} , {
name : "衡水" ,
value : 80
} , {
name : "包头" ,
value : 80
} , {
name : "绵阳" ,
value : 80
} , {
name : "乌鲁木齐" ,
value : 84
} , {
name : "枣庄" ,
value : 84
} , {
name : "杭州" ,
value : 84
} , {
name : "淄博" ,
value : 85
} , {
name : "鞍山" ,
value : 86
} , {
name : "溧阳" ,
value : 86
} , {
name : "库尔勒" ,
value : 86
} , {
name : "安阳" ,
value : 90
} , {
name : "开封" ,
value : 90
} , {
name : "济南" ,
value : 92
} , {
name : "德阳" ,
value : 93
} , {
name : "温州" ,
value : 95
} , {
name : "九江" ,
value : 96
} , {
name : "邯郸" ,
value : 98
} , {
name : "临安" ,
value : 99
} , {
name : "兰州" ,
value : 99
} , {
name : "沧州" ,
value : 100
} , {
name : "临沂" ,
value : 103
} , {
name : "南充" ,
value : 104
} , {
name : "天津" ,
value : 105
} , {
name : "富阳" ,
value : 106
} , {
name : "泰安" ,
value : 112
} , {
name : "诸暨" ,
value : 112
} , {
name : "郑州" ,
value : 113
} , {
name : "哈尔滨" ,
value : 114
} , {
name : "聊城" ,
value : 116
} , {
name : "芜湖" ,
value : 117
} , {
name : "唐山" ,
value : 119
} , {
name : "平顶山" ,
value : 119
} , {
name : "邢台" ,
value : 119
} , {
name : "德州" ,
value : 120
} , {
name : "济宁" ,
value : 120
} , {
name : "荆州" ,
value : 127
} , {
name : "宜昌" ,
value : 130
} , {
name : "义乌" ,
value : 132
} , {
name : "丽水" ,
value : 133
} , {
name : "洛阳" ,
value : 134
} , {
name : "秦皇岛" ,
value : 136
} , {
name : "株洲" ,
value : 143
} , {
name : "石家庄" ,
value : 147
} , {
name : "莱芜" ,
value : 148
} , {
name : "常德" ,
value : 152
} , {
name : "保定" ,
value : 153
} , {
name : "湘潭" ,
value : 154
} , {
name : "金华" ,
value : 157
} , {
name : "岳阳" ,
value : 169
} , {
name : "长沙" ,
value : 175
} , {
name : "衢州" ,
value : 177
} , {
name : "廊坊" ,
value : 193
} , {
name : "菏泽" ,
value : 194
} , {
name : "合肥" ,
value : 229
} , {
name : "武汉" ,
value : 273
} , {
name : "大庆" ,
value : 279
} ] ) ,
symbolSize : 12 ,
label : {
normal : {
show : false
} ,
emphasis : {
show : false
}
} ,
itemStyle : {
emphasis : {
borderColor : '#fff' ,
borderWidth : 1
}
}
} ]
}
myChart. setOption ( option) ;
</ script>
</ body>
</ html>
15.进口贸易
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" >
< title> line</ title>
< script src = " js/echarts.min.js" > </ script>
< script src = ' js/vintage.js' > </ script>
< script src = " js/infographic.js" > </ script>
</ head>
< body>
< div id = " main" style = " width : 900px; height : 600px; " > </ div>
< script type = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) , 'vintage' ) ;
var option = {
title : {
text : '进口贸易额'
} ,
toolbox : {
show : true ,
feature : {
saveAsImage : {
show : true
}
}
} ,
legend : {
data : [ '贸易额' ]
} ,
xAxis : {
data : [ "2010" , "2011" , "2012" , "2013" , "2014" , "2015" ,
"2016" , "2017" ]
} ,
yAxis : { } ,
series : [ {
name : '贸易额' ,
type : 'bar' ,
data : [ 1.6 , 2.3 , 3.1 , 4.06 , 5.3 , 5.84 , 6.5 , 7.2 ]
} , {
name : '增长率' ,
type : 'line' ,
data : [ 31.5 , 36.7 , 42.4 , 45.8 , 38.1 , 39.6 , 40.1 , 35.2 ]
} ]
} ;
myChart. setOption ( option) ;
</ script>
</ body>
</ html>