导入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-画堆积柱状图,折线图的更多相关文章

  1. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  2. C# 绘制统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  3. Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  4. achartengine画出动态折线图

    achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目 ...

  5. 用matplotlib.pyplot画简单的折线图,直方图,散点图

    #coding=utf-8 """ 用matplotlib.pyplot画简单的折线图,直方图,散点图 """ import matplot ...

  6. 解决echarts的叠堆折线图数据出现坐标和值对不上的问题

    原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...

  7. Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程

    Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...

  8. Python图表数据可视化Seaborn:2. 分类数据可视化-分类散点图|分布图(箱型图|小提琴图|LV图表)|统计图(柱状图|折线图)

    1. 分类数据可视化 - 分类散点图 stripplot( ) / swarmplot( ) sns.stripplot(x="day",y="total_bill&qu ...

  9. Matplotlib中plot画点图和折线图

    引入: import matplotlib.pyplot as plt 基本语法: plt.plot(x, y, format_string, **kwargs) x:x轴数据,列表或数组,可选 y: ...

  10. seaborn分类数据可视化:散点图|箱型图|小提琴图|lv图|柱状图|折线图

    一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...

随机推荐

  1. AC日记——潜伏着 openjudge 1.7 11

    11:潜伏者 总时间限制:  1000ms 内存限制:  65536kB 描述 R国和S国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动. 历经艰险后,潜伏于S国的R国间谍小C终于摸清了S国军 ...

  2. 《你不常用的c#之二》:略谈GCHandle

    我们在使用c#托管代码时,内存地址和GC回收那不是我们关心的,CLR已经给我们暗箱操作.但是如果我们在c#中调用了一个非托管代码,比如vc的DLL,而且他有个回调函数,需要引用c#中的某个对象并操作, ...

  3. Socket用法详解

    在客户/服务器通信模式中,客户端需要主动创建与服务器的Socket(套接字),服务端收到了客户端的请求,也会创建与客户端连接的Socket. Scoket可以看作两端通信的收发器,服务端和客户端都通过 ...

  4. J2EE中关于tomcat的maxIdle、maxActive、maxActive相关配置

    一.基本概念 1 maxActive 连接池的最大数据库连接数.设为0表示无限制,一般把maxActive设置成可能的并发量就行了 2 maxIdle 最大的空闲连接数 3 maxWait 最大建立连 ...

  5. 一种Docker image镜像的取代方案

    在http://openvz.org/Download/templates/precreated中有很多压缩的镜像文件,可以将这些文件下载后采用import方式使用镜像,也可以采用我原来的博文:doc ...

  6. AFNetworking 基本使用

    AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其他方法为基础的. 下面这个例子是用来处理json请求的 3如何选择AFNetwork ...

  7. dubbo2.5.3 与spring 3.1.x 冲突

    在集成了dubbo2.5.3 的项目中初始化出现 MalformedParameterizedTypeException 检查发现这是因为dubbo2.5.3依赖的springframeworks是2 ...

  8. Centos5.8 安装 Redmine

    安装Ruby 到 /opt/ruby-2.0.0 -p481.tar.gz cd ruby--p481 ./configure --prefix=/opt/ruby- sudo make sudo m ...

  9. Java中run(), start(), join(), wait(), yield(), sleep()的使用

    run(), start(), join(), yield(), sleep() 这些是多线程中常用到的方法. run(): 每个Thread中需要实现的方法, 如果直接调用的话, 会是和单线程一样的 ...

  10. intellij idea 高级用法之:集成JIRA、UML类图插件、集成SSH、集成FTP、Database管理

    之前写过一篇IntelliJ IDEA 13试用手记,idea还有很多高大上的功能,易用性几乎能与vs.net媲美,反正我自从改用idea后,再也没开过eclipse,今天来看几个高级功能: 一.与J ...