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图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
随机推荐
- 网上看到一份详细sql游标说明 《转载 https://www.cnblogs.com/xiongzaiqiren/p/sql-cursor.html》
SQL游标(cursor)详细说明及内部循环使用示例 游标 游标(cursor)是系统为用户开设的一个数据缓冲区,存放SQL语句的执行结果.每个游标区都有一个名字,用户可以用SQL语句逐一从游标中获 ...
- [转]图解Docker容器和镜像
本文转自:https://www.cnblogs.com/wangqiaomei/p/5818636.html 图解Docker容器和镜像 这篇文章希望能够帮助读者深入理解Docker的命令,还有容器 ...
- 高德地图Javascript API设置域名白名单
在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...
- JDBC示例程序
import java.io.IOException; import java.io.InputStream; import java.sql.Connection; import java.sql. ...
- npm 相关命令
npm的相关命令 npm init -y : 产生一个package.json文件 npm install --save-dev 模块名 : 模块名会再package.json文件中的d ...
- Ext.isEmpty()的使用
说明如下: isEmpty( Object value, Boolean allowEmptyString ) : Boolean 如果传递的值为空,则返回 true,否则返回 false.该值被认为 ...
- CentOS 安装 jdk
1.首下载CentOS对应的jdk压缩包. 2.通过secureCRT工具远程连接目标服务器. 3.通过rz命令上传jdk压缩包到linux服务器. 4.解压缩上传的jdk压缩包 tar -zxvf ...
- 也说Socket
网上有大量socket相关文章,茫茫多,大多交代不清,最近自我整理了一下socket相关知识,附加了大量代码注释,先看效果. 上代码,客户端: Socket socket1 = null;//一个全局 ...
- 安装docker17.06.0版本报错和解决方法
本人在自己电脑的虚拟机里安装docker ce 17.06.0版本的时候报如下错误: [root@manager2 yum.repos.d]# yum install docker-ce-17.06. ...
- Android udp json+数组 --->bytes发送数据
Android json支持五种数据类型 String / int(float)/bool / null / object 今天说 object : json = new JSONObject( ...