echarts图表实例

这段时间以前的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: #19254f;}</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: #19254f;}</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: #19254f;}</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: #19254f;}</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>复制代码

echarts图表实例相关推荐

echarts图表使用以及图片转码
1.echarts介绍 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
web图片铺满网页_web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)...
[实例简介] 最近针对web端实现单页面展示多个echarts图表,更直观的展示数据的变化,响应式 [实例截图] [核心代码] charts └── charts ├── css │ ├── bo ...
在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...
问题描述: echarts图表的toolbox里面本身有下载的功能,但有的时候,我们需要在echarts图表外添加一个按钮来实现下载,以下是基于vue,echarts版本4的一个解决方案记录: 解决方 ...
***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
如何利用echarts图表获取条状图点击名称和值
如何利用echarts图表获取条状图点击名称和值听语音 | 浏览:1505 | 更新:2017-06-13 10:20 | 标签:软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工 ...
echart vue 图表大小_vue中echarts图表大小适应窗口大小且不需要刷新案例
我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getEl ...
echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...

echarts图表实例

echarts图表实例相关推荐

最新文章

热门文章