这段时间以前的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图表实例的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
