ECharts图表之柱状折线混合图
2017-02-07 15:06
525 查看
Echarts 官网主页 http://echarts.baidu.com/index.html
Echarts 更多项目案例 http://echarts.baidu.com/echarts2/doc/example.html
Echart参数设置 http://echarts.baidu.com/echarts2/doc/doc.html#Legend
实现源码如下
效果图如下
Echarts 更多项目案例 http://echarts.baidu.com/echarts2/doc/example.html
Echart参数设置 http://echarts.baidu.com/echarts2/doc/doc.html#Legend
实现源码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Echarts柱状折线混合图</title> <!-- 引入 ECharts 文件 --> <script src="js/echarts/echarts.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var option = { tooltip: { trigger: 'axis' }, legend: { data:['降水量','折线'] }, xAxis: [ { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis: [ { type: 'value', name: '水量/ml', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ' } } ], series: [ { name:'降水量', type:'bar', /*itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#fe6262'}, {offset: 0.5, color: '#fe4141'}, {offset: 1, color: '#fe1818'} ] ), }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#fe6262'}, {offset: 0.5, color: '#fe4141'}, {offset: 1, color: '#fe1818'} ] ) } },*/ /*设置柱状图颜色*/ itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [ '#fe4f4f','#fead33','#feca2b','#fef728','#c5ee4a', '#87ee4a','#46eda9','#47e4ed','#4bbbee','#7646d8', '#924ae2','#C6E579','#F4E001','#F0805A','#26C0C0' ]; return colorList[params.dataIndex] }, /*信息显示方式*/ label: { show: true, position: 'top', formatter: '{b}\n{c}' } } }, data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45] }, { name:'折线', type:'line', itemStyle : { /*设置折线颜色*/ normal : { /* color:'#c4cddc'*/ } }, data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45] } ] }; // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
效果图如下
相关文章推荐
- Echarts绘制折线图柱状图混合图表练习
- echarts页面的图表的base64生成图片折线图只有点
- 笔记:Echarts - 柱状折线图
- Echarts-画柱状,折线图
- Echarts基础图表--折线(面积)图_干货
- Echarts柱状折线图
- echarts图表中的点、柱形或者折线显示不出来,但是有数据的问题解决(另附后台返回数据实例代码)
- Echarts折线图表断点如何补全
- 完美解决echarts的柱状图和折线图的点击非图表图形元素不会触发事件
- 一个手机图表(echarts)折线图的封装
- Echarts 图表折线图入门+轮播数据
- 用echarts画有两条线(柱)的折线(柱状)图
- MPAndroidChart绘制折线图柱状图混合图表练习
- ECharts图表整合----折线图、柱状图、扇形图
- echarts图表(折线图、柱形图)
- gdi+实现多种统计图表(饼状,折线,柱状)支持负坐标
- ECharts数据图表系统? 5分钟上手!
- android最全的图表(折线柱形等)
- ECharts-Java使用Java快速开发ECharts图表
- Angular2.0/4.0 使用Echarts图表的示例代码