這段時間以前的UI回來了，我比較喜歡她的設計，哈哈~這次她設計了幾個圖表，感覺還是很好看的，所以我寫好代碼就想分享上來~
這里主要分享四個，先放上效果圖，感興趣的可以繼續往下看哦，后面會分別放上效果圖以及代碼哦~
以下為每個效果對應的代碼：
1.橫向多種顏色的柱狀圖
<!DOCTYPE html>
<html lang=
"en"><head><meta charset=
"utf-8"><script
type=
"text/javascript" src=
"jq.js"></script><script
type=
"text/javascript" src=
"echarts.min.js"></script></head><body><style
type=
"text/css">html {background: }</style><div id=
"main" style=
"width: 800px;height:400px;"></div><script
type=
"text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById(
'main'));option = {tooltip : {trigger:
'axis',axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type :
'shadow' // 默認為直線，可選為：
'line' |
'shadow'}},legend: {data: [
'I~II類',
'III類',
'IV類',
'V類',
'劣V類'],textStyle: {color:
'#fff'}},grid: {left:
'3%',right:
'4%',bottom:
'3%',containLabel:
true},xAxis: {
type:
'value',axisLabel: {textStyle: {color:
'#71c9d7'}},axisLine: {show:
true,lineStyle: {color:
'#304c71',}},splitLine: {show:
true,lineStyle: {color:
'#304c71 ',}},},yAxis: {
type:
'category',data: [
'白馬河站',
'省電大站',
'五四河站',
'風河站',
'德國站',
'法國站',
'中立站'],axisLabel: {formatter:
'{value}',textStyle: {color:
'#ced9d5'}},axisLine: {show:
true,lineStyle: {color:
'#47809b',}},splitLine: {show:
true,lineStyle: {color:
'#304c71 ',}},},series: [{name:
'I~II類',
type:
'bar',stack:
'總量',label: {normal: {show:
false,position:
'insideRight'}},itemStyle: {normal: {barBorderRadius: [0,300,300,0],color:
'#54e5fa'}},data: [0, 302, 301, 334, 0, 330, 320],barWidth: 10,},{name:
'III類',
type:
'bar',stack:
'總量',label: {normal: {show:
false,position:
'insideRight'}},itemStyle: {normal: {barBorderRadius: [0,300,300,0],color:
'#fff962'}},data: [0, 0, 101, 134, 90, 230, 210]},{name:
'IV類',
type:
'bar',stack:
'總量',label: {normal: {show:
false,position:
'insideRight'}},itemStyle: {normal: {barBorderRadius: [0,300,300,0],color:
'#6fd975'}},data: [220, 182, 191, 234, 290, 330, 310]},{name:
'V類',
type:
'bar',stack:
'總量',label: {normal: {show:
false,position:
'insideRight'}},itemStyle: {normal: {barBorderRadius: [0,300,300,0],color:
'#e4b158'}},data: [150, 212, 201, 154, 190, 330, 410]},{name:
'劣V類',
type:
'bar',stack:
'總量',label: {normal: {show:
false,position:
'insideRight',}},itemStyle: {normal: {barBorderRadius: [0,300,300,0],color:
'#e87379'}},data: [120, 232, 301, 134, 129, 133, 120]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body>
</html>
復制代碼
2.漸變折線圖
<!DOCTYPE html>
<html lang=
"en"><head><meta charset=
"utf-8"><script
type=
"text/javascript" src=
"jq.js"></script><script
type=
"text/javascript" src=
"echarts.min.js"></script></head><body><style
type=
"text/css">html {background: }</style><div id=
"main" style=
"width: 800px;height:400px;"></div><script
type=
"text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById(
'main'));option = {tooltip: {trigger:
'axis',position:
function (pt) {
return [pt[0],
'10%'];}},title: {left:
'0',text:
'數據同比圖',textStyle: {color:
'#fff'}},legend: {data:[
'2017',
'2018'],textStyle: {color:
'#fcfbf9'}},xAxis: {
type:
'category',// boundaryGap:
false,data: [
'白馬河站',
'省電大站',
'五四河站',
'風河站',
'德國站'],axisLabel: {textStyle: {color:
'#ced9d5'}},axisLine: {show:
true,lineStyle: {color:
'#304c71',}},},yAxis: {
type:
'value',axisLabel: {formatter:
'{value}',textStyle: {color:
'#71c9d7'}},axisLine: {show:
true,lineStyle: {color:
'#47809b',}},splitLine: {show:
true,lineStyle: {color:
'#304c71 ',}},},series: [{name:
'2017',
type:
'line',// smooth:
true,symbol:
'image://yellow.png',symbolSize: 30,sampling:
'average',itemStyle: {normal: {color:
'#fae84a',}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:
'rgba(250, 232, 74, 0.8)'}, {offset: 1,color:
'rgba(250, 232, 74, 0.4)'}])}},data: [20,10,30,20,28]},{name:
'2018',
type:
'line',// smooth:
true,symbol:
'image://blue.png',symbolSize: 30,sampling:
'average',itemStyle: {normal: {color:
'#54f3ee'}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:
'rgba(84, 243, 238, 0.8)'}, {offset: 1,color:
'rgba(84, 243, 238, 0.4)'}])}},data: [10,20,15,30,17]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body>
</html>
復制代碼
3.漸變尖角柱狀圖
<!DOCTYPE html>
<html lang=
"en"><head><meta charset=
"utf-8"><script
type=
"text/javascript" src=
"jq.js"></script><script
type=
"text/javascript" src=
"echarts.min.js"></script></head><body><style
type=
"text/css">html {background: }</style><div id=
"main" style=
"width: 800px;height:400px;"></div><script
type=
"text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById(
'main'));option = {tooltip: {trigger:
'axis',axisPointer: {
type:
'cross',crossStyle: {color:
'#999'}}},legend: {data:[
'蒸發量',
'降水量'],textStyle: {color:
'#fcfbf9'}},xAxis: [{
type:
'category',data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月'],axisPointer: {
type:
'shadow'},axisLabel: {textStyle: {color:
'#ced9d5'}},axisLine: {show:
true,lineStyle: {color:
'#304c71',}},}],yAxis: [{
type:
'value',name:
'降水量',min: 0,max: 250,interval: 50,axisLabel: {formatter:
'{value} ml',textStyle: {color:
'#71c9d7'}},axisLine: {show:
true,lineStyle: {color:
'#47809b',}},splitLine: {show:
true,lineStyle: {color:
'#304c71 ',}},},{
type:
'value',name:
'蒸發量',min: 0,max: 25,interval: 5,axisLabel: {formatter:
'{value}類',textStyle: {color:
'#71c9d7'}},axisLine: {show:
true,lineStyle: {color:
'#47809b',}},splitLine: {show:
true,lineStyle: {color:
'#304c71 ',}},}],series: [{name:
'降水量',
type:
'bar',data:[26, 59, 90, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],itemStyle: {normal: {show:
true,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:
'#75ddc6'}, {offset: 1,color:
'#6fcfdd'}]),barBorderRadius: [0,0,0,300],borderWidth: 0,}},barWidth: 10,},{name:
'蒸發量',
type:
'bar',yAxisIndex: 1,data:[5, 5, 10, 13, 13, 14, 15, 16, 14, 13, 4, 3],itemStyle: {normal: {show:
true,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:
'#5969f2'}, {offset: 1,color:
'#97a7fe'}]),barBorderRadius: [0,0,300,0],borderWidth: 0,}},barWidth: 10,},]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body>
</html>
復制代碼
4. 折線餅圖
<!DOCTYPE html>
<html lang=
"en"><head><meta charset=
"utf-8"><script
type=
"text/javascript" src=
"jq.js"></script><script
type=
"text/javascript" src=
"echarts.min.js"></script></head><body><style
type=
"text/css">html {background: }</style><div id=
"main" style=
"width: 800px;height:400px;"></div><script
type=
"text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById(
'main'));option = {title: {text:
'水質類別分類\n環形圖',left:
'center',top:
'44%',textStyle: {color:
'#62a6bb',fontSize: 22,align:
'center',},},toolbox: {show :
true,right:
'30%',feature : {saveAsImage : {show:
true}}},calculable :
false,series : {name:
'訪問來源',
type:
'pie',radius : [100, 150],x:
'60%',width:
'35%',funnelAlign:
'left',max: 1048,label: {normal: {textStyle: {fontSize: 16,color:
'#666'}}},data:[{value:885, name:
'直達',itemStyle:{normal:{color:
'#54e9ff'}}},{value:390, name:
'郵件營銷',itemStyle:{normal:{color:
'#fffa64'}}},{value:184, name:
'聯盟廣告',itemStyle:{normal:{color:
'#7bf797'}}},{value:135, name:
'視頻廣告',itemStyle:{normal:{color:
'#eeac60'}}},{value:448, name:
'百度',itemStyle:{normal:{color:
'#dd7574'}}},],labelLine: {normal:{length2: 80,lineStyle: {width: 2,
type:
'dashed'}}},label: {normal: {show:
true,formatter:
function(params){
return params.name +
' : ' + params.value +
'次';},textStyle: {color:
'#dbd4e6',fontSize: 14,lineHeight: 30},}},}};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body>
</html>
復制代碼
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
以上是生活随笔為你收集整理的echarts图表实例的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
