ECharts图表之柱状折线混合图
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
实现源码如下
<!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图表之柱状折线混合图的更多相关文章
- ajax实现highchart与数据库数据结合完整案例分析（三）---柱状折线图
作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...
- ECharts图表插件(4.x版本)使用（一、关系图force节点显示为自定义图像/图片，带分类选择）
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
- 用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
- 使用WinForm Chart控件 制作饼装，柱状，折线图
http://blog.csdn.net/dream2050csdn/article/details/53510340 chart控件的属性很多,主要用到Chart控件图表区域的属性有五个属性 1.A ...
- Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...
- Python的可视化包 – Matplotlib 2D图表(点图和线图,.柱状或饼状类型的图),3D图表(曲面图，散点图和柱状图)
Python的可视化包 – Matplotlib Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型地2D图表和一些基本的3D图表.Matplotlib最早是为了可 ...
- iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略
我是前言: 大约几个月前我在某平台写了一篇文章, 文中简单地介绍了Charts两种图表的样式的使用, 不过有种意犹未尽的感觉, 利用周末的空闲时间再次看了看, 有了新的收获, 今天发出来,分享给大家, ...
- HighChart 实现从后台取数据来实时更新柱状和折线组图
前段时间公司让弄图表,给我说有HighCharts这个js插件,于是上网上搜,由于本人是写后端的,对于JavaScript和jQuery不是很熟悉,虽然找到了模板,但是还是不明白,所以一点一点的改,但 ...
- 转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
随机推荐
- 第一册：lesson eighty five。
原文:Paris in the spring. A:Hello,Ken. B:Hi,George. A:Have you just been to the cinema? B:Yes,I have. ...
- C#面向对象之封装。
封装是面向对象的基础和重要思想之一,今天具体的了解封装这一特性后发现其实自己已经接触过很多关于封装的内容了. 一.什么是封装. 封装的概念:将具体的实现细节装到一个容器中,封闭或隐藏起来(使用访问修饰 ...
- svn迁移后本地地址变更及externals无效的问题
1.软件: visual SVN Server 2.具体方法: 在打开本地原来SVN check out的根目录,点右键,tortoiseSVN --> relocate 弹出的对话框中修改s ...
- Laravel5.5 数据库迁移：创建表与修改表
数据库迁移是数据库的版本管理,要使用数据库迁移,需要在.env文件中连接好数据库(不多说).laravel本身已经存在user表和password_resets表的迁移了,因此,执行 php arti ...
- C#DataTable复制、C#DataTable列复制、C#DataTable字段复制
try { //获取满足条件的数据 DataTable Mdr = datable.Select().ToString("yyyy-MM-dd HH:mm:ss") + " ...
- chorme type=file 延迟5-8秒
原文地址:http://www.piaoyi.org/computer/Google-Chrome-input-file-delay-3-5.html 原先写法: <button type=&q ...
- java ee，包括js，html，jsp等等知识整合
为了方便修改和后续的包装套路 首先用户访问的页面从web.xml找到 <welcome-file-list> <welcome-file>index.html</we ...
- BZOJ1007: [HNOI2008]水平可见直线(单调栈)
Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 8638 Solved: 3327[Submit][Status][Discuss] Descripti ...
- iOS ----------要学习的地方（链接整理）
1.http://www.cocoachina.com/special/xcode/ 2.http://blog.csdn.net/a416863220/article/details/4111387 ...
- loadrunner 脚本录制-录制选项设置HTML-based URL-based Script
脚本录制-录制选项设置, HTML-based Script与URL-based Script by:授客 QQ:1033553122 Access:Vugen->Tool->Record ...