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图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
随机推荐
- Java并发（一）—— 使用多线程
Java的线程机制是抢占式的,所谓的抢占式指的是每一个线程都会被分配一个指定大小的时间片,一旦这个时间片用完,就会通过上下文切换到另一个线程上去. 并发是主要是为了提高单处理器的性能.创建一个线程会有 ...
- 脚本解决.NET MVC按钮重复提交问题
见于:Avoiding Duplicate form submission in Asp.net MVC by clicking submit twice 脚本代码: $(document).on(' ...
- .net core2.0+nginx+Ubuntu14.04【一个小白的初次尝试】
新的业务来了,需要使用linux环境部署web服务,作为一个C#的懒惰程序员,就这么上了车[狗脸],废话不多说,跟我一样的小白请看,大神请绕路. 站点暂时没有使用Docker部署,为什么呢,因为我还没 ...
- 为什么需要把页面放在WEB-INF文件夹下面？
1.基于不同的功能 JSP 被放置在不同的目录下 这种方法的问题是这些页面文件容易被偷看到源代码,或被直接调用.某些场合下这可能不是个大问题,可是在特定情形中却可能构成安全隐患.用户可以绕过Strut ...
- 【Java每日一题】20170117
20170116问题解析请点击今日问题下方的“[Java每日一题]20170117”查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; import jav ...
- 清除float影响
条件: 父元素中有子元素float的话,可能就会影响父元素的高度,从而影响布局: 解决方案: 1.直接给父元素定高: 弊端:必须知道父元素的高: 2. 父元素使用overflow属性值为hidden解 ...
- ASPxGridView 选中主表一行数据，从表自动选中（勾选）对应的行
一.图解 下图为效果图,点击 [A表]种的某一行,[B表]会有与之相对于一行会被自动选中并且勾选上: 二.Html 代码 <html xmlns="http://www.w3.org/ ...
- 6个小而美的es6新特性
译者:动静若参商 译文:http://www.zcfy.cc/article/1795 原文:https://davidwalsh.name/es6-features JavaScript社区中的每个 ...
- js 从一个对象中找到属性值相等的集合
getobjs: function(objs, key, value) { var result = []; for (var i in objs) { var obj = $(objs[i]); i ...
- thinkphp 使用paginate分页搜索带参数
最近做项目发现使用paginate分页,搜索的时候点下一页搜索条件就变没了,所以在网上找了找一些方法,有的说是使用Page类,但是用习惯了paginate,再用Page不习惯,找到了一个方法,可以使用 ...