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图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
随机推荐
- 深度解析XML的结构与类映射
XML概述 可扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自 ...
- JavaScript 图片弹框显示
function fnCreate(src) { /* 要创建的div的classname */ var ClassName = "thumb ...
- C#实现给图片加边框的方法
Bitmap bit= new Bitmap(@"" + Path);//给图片加边框 //Bitmap bit = new Bitmap(Screen.AllScreens[0] ...
- mysql常用操作小节
比如要将表user 中的字段 username修改为 name: ); 其他关于表字段信息的修改: 1.添加字段:给表 user 添加字段 password 在 id 后面; ) NOT NULL A ...
- spring_06装配bean_2
一.前言 1.自动装配尽量不要用,不如使用set明确 二. 通过构造函数注入值(Bean中可以没有get,set方法) <bean id="emp" class=" ...
- Module的加载实现
烂笔头开始记录小知识点啦- 浏览器要加载 ES6模块,: <script type="module" src="./foo.js"></scr ...
- linux 下修改mysql下root 权限来允许远程连接
MySQL默认只允许root帐户在本地登录,如果要在其它机器上连接mysql,必须修改root允许远程连接. 其操作简单,如下所示: 1. 进入mysql: /usr/local/mysql/bin/ ...
- Vue2 几种常见开局方式
在SF问题中看到了一个关于vue-cli中的template问题,问题是这样的:用vue-cli工具生成的main.js中: import Vue from 'vue' import App from ...
- arcgis建立拓扑分析(检验矢量图)
目的:矢量图画好后,检查是否有伪节点,悬挂节点等,线要素和面要素都可以检查.伪节点,两条线应该相交但是画的没相交:悬挂节点,两条线看似相交了但是没有节点,因此路径不同(类似于高架桥和交叉口,悬挂节点就 ...
- LeetCode单排日记
初衷 之前有研究过一段时间数据结构与算法,但平时使用的不多,就连排序都很少用(自从JDK8有了Stream,就再也没有手写排序了.),所谓用进废退,时至今日,能记住的已经不多了,还记得之前有一次面试, ...