导入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',
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',
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="main2"></div>

Echarts-画柱状,折线图的更多相关文章

  1. ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图

    作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...

  2. java项目使用Echarts 做柱状堆叠图,包含点击事件

    基础知识请自行百度查看,以下直接贴出实现代码: <%@ page pageEncoding="UTF-8"%><!DOCTYPE html><html ...

  3. ECharts图表之柱状折线混合图

    Echarts 官网主页  http://echarts.baidu.com/index.html Echarts 更多项目案例  http://echarts.baidu.com/echarts2/ ...

  4. achartengine画出动态折线图

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

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

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

  6. Python 中 plt 画柱状图和折线图

    1. 背景 Python在一些数据可视化的过程中需要使用 plt 函数画柱状图和折线图. 2. 导入 import matplotlib.pyplot as plt 3. 柱状图 array= np. ...

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

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

  8. Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题

    今天在使用Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题: 数据都拿到了,放到Json数组都是完整的, 展现是时候 如下图:

  9. Matlab画柱状和折线对照图

        上面是效果图,看着很不错吧,主要的问题在于用XTickLabel设置横坐标时候,横坐标会扩展,就是说如果label是[1 2 3],咱就做了三组试验,参数分别是 1 2 3,但是显示是1 2 ...

  10. vue中使用echarts画饼状图

    echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...

随机推荐

  1. Seajs是什么及sea.js 由来,特点以及优势

    Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享   1 ...

  2. [AIR] as3 之条件编译多平台妙用

    http://bbs.9ria.com/thread-418864-1-1.html 一直希望as3 可以支持条件编译,即满足A时编译函数1,满足B时则编译函数2. 最佳百度了之后,发现原来是可以实现 ...

  3. Python的高级特性5:谈谈python的动态属性

    正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性. 看下面一种常见的get/set操作 In [174]: class ...

  4. scrapy系统学习(1)--概要

    本文操作环境:ubuntu14.04 一.安装Scrapy/Mysql/MySQLdb 参照官网教程安装Scrapy #sudo apt-key adv --keyserver hkp://keyse ...

  5. 关闭tomcat, 部署并启动tomcat的脚本

    /opt/tomcat/bin/shutdown.sh rm -f /opt/tomcat/webapps/ibank.war rm -rf /opt/tomcat/webapps/ibank cp ...

  6. Web.config配置文件详解(新手必看)(转)

    转于:http://www.cnblogs.com/gaoweipeng/archive/2009/05/17/1458762.html <?xml version="1.0" ...

  7. Kafka是分布式发布-订阅消息系统

    Kafka是分布式发布-订阅消息系统 https://www.biaodianfu.com/kafka.html Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apa ...

  8. Tomcat 内存溢出对应解决方式

    1.Tomcat内存溢出的原因 生产环境中Tomcat内存设置不好很容易出现内存溢出.造成内存溢出是不一样的,当然处理方式也不一样. 这里根据平时遇到的情况和相关资料进行一个总结.常见的一般会有下面三 ...

  9. Theano2.1.18-基础知识之theano的扩展

    来自:http://deeplearning.net/software/theano/tutorial/extending_theano.html Extending Theano 该教程覆盖了如何使 ...

  10. Yii2 使用小部件 Breadcrumbs

    yii有两种Breadcrumbs写法,one: echo Breadcrumbs::widget([ 'itemTemplate' => "<li><i>{l ...