Echarts-画堆积柱状图,折线图
导入echarts包
<script src='../scripts/libraries/echarts/echarts-all.js'></script>
js
var myChart = echarts.init(document.getElementById('main2'));
myChart.setOption({
title : {
text : ""
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
tooltip : {
trigger : 'axis',
showDelay : 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data:['蒸发量','降水量','平均温度']
},
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
name : '水量',
axisLabel : {
formatter: '{value} ml'
}
},
{
type : 'value',
name : '温度',
axisLabel : {
formatter: '{value} °C'
}
}],
series : [
{
name:'蒸发量',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
});
html网页
<div class="chart" id="main1" style="margin-bottom:-70px;margin-top:-50px;"></div>

Echarts-画堆积柱状图,折线图的更多相关文章
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- achartengine画出动态折线图
achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目 ...
- 用matplotlib.pyplot画简单的折线图,直方图,散点图
#coding=utf-8 """ 用matplotlib.pyplot画简单的折线图,直方图,散点图 """ import matplot ...
- 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...
- Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...
- Python图表数据可视化Seaborn:2. 分类数据可视化-分类散点图|分布图(箱型图|小提琴图|LV图表)|统计图(柱状图|折线图)
1. 分类数据可视化 - 分类散点图 stripplot( ) / swarmplot( ) sns.stripplot(x="day",y="total_bill&qu ...
- Matplotlib中plot画点图和折线图
引入: import matplotlib.pyplot as plt 基本语法: plt.plot(x, y, format_string, **kwargs) x:x轴数据,列表或数组,可选 y: ...
- seaborn分类数据可视化:散点图|箱型图|小提琴图|lv图|柱状图|折线图
一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...
随机推荐
- MySQL 5.7.x 配置教程
软件环境 操作系统:windows 10 x64 企业版 MySQL:mysql-5.7.11-winx64 MySQL官网下载:http://downloads.mysql.com/archives ...
- Java的注解机制——Spring自动装配的实现原理
http://www.cnblogs.com/Johness/archive/2013/04/17/3026689.html
- Unity 实现物体破碎效果(转)
感谢网友分享,原文地址(How to Make an Object Shatter Into Smaller Fragments in Unity),中文翻译地址(Unity实现物体破碎效果) In ...
- Maven系列二setting.xml 配置详解
文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${use ...
- java 26 - 8 网络编程之 TCP协议的练习
TCP练习: 1.客户端键盘录入,服务器输出文本文件 客户端代码: public class ClientDemo { public static void main(String[] args) t ...
- proxy改变this指向
var core_slice = Array.prototype.slice; var proxy = function(context,fn) { var args, proxy; if ( typ ...
- NPM 如何升级?
- ONS C++ Windows SDK 调试方法及注意事项
此文将展示ONS C++ Windows SDK 整个调试过程,笔者直接使用sdk包中的example消息发送示例代码,开发环境为win7, 64位,Visual Studio Professiona ...
- codevs 2491 玉蟾宫
codevs 2491 玉蟾宫 http://codevs.cn/problem/2491/ 题目描述 Description 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉 ...
- linux中vi编辑器的使用
vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本 编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任 何版本,vi编辑器是完 ...