导入echarts包

  1. <script src='../scripts/libraries/echarts/echarts-all.js'></script>

堆积图js

  1. var myChart = echarts.init(document.getElementById('main2'));
  2. myChart.setOption({
  3. title : {
  4. text : ""
  5. },
  6. toolbox: {
  7. show : true,
  8. feature : {
  9. mark : {show: true},
  10. dataView : {show: true, readOnly: false},
  11. magicType: {show: true, type: ['line', 'bar']},
  12. restore : {show: true},
  13. saveAsImage : {show: true}
  14. }
  15. },
  16. tooltip : {
  17. trigger : 'axis',
  18. showDelay : 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
  19. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  20. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  21. }
  22. },
  23. legend: {
  24. data:['蒸发量','降水量','平均温度']
  25. },
  26. xAxis : [
  27. {
  28. type : 'category',
  29. data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  30. }
  31. ],
  32. yAxis : [
  33. {
  34. type : 'value',
  35. name : '水量',
  36. axisLabel : {
  37. formatter: '{value} ml'
  38. }
  39. },
  40. {
  41. type : 'value',
  42. name : '温度',
  43. axisLabel : {
  44. formatter: '{value} °C'
  45. }
  46. }],
  47. series : [
  48.  
  49. {
  50. name:'蒸发量',
  51. type:'bar',
  52. 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]
  53. },
  54. {
  55. name:'降水量',
  56. type:'bar',
  57. 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]
  58. },
  59. {
  60. name:'平均温度',
  61. type:'line',
  62. yAxisIndex: 1,
  63. 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]
  64. }
  65. ]
  66. });

html

  1. <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. Unity自动构建

    Jenkins/Hudson Jenkins的前身是Hudson(Sun开发),2010年从Hudson分支出来.由于Sun被Oracle收购,Oracle声称拥有Hudson的商标所有权,Hudso ...

  2. HTML常用标签跟表格

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

  3. Redis的安装和使用

    Redis 安装redis: 将将要安装redis文件夹放到一个盘中 通过命令行切换到放文件的地方 安装成功后,将文件夹中的扩展放入wamp/php/ext中,然后配置php.ini,重启服务器. 使 ...

  4. python反弹tty shell

    linux环境下进行内外渗透需要反弹shell连接内网ssh,Telnet等,就需要tty层的shell了.python代码转过来的,备用. #!/usr/bin/python import sys ...

  5. Cornerstone 哪些错误

    1.Unable to connect to a repository at URl.............,The operation could not be completed 说明无法连接的 ...

  6. understand一些功能

    功能 支持分析的语言 统计总的代码数据 统计单个文件的数据 分析代码复杂度 分析代码格式 文件的依赖关系 文件夹依赖关系 文件夹包含关系.代码量 understand提供了很多图表,同时它可以根据源码 ...

  7. od破解实例

    百度经验: http://jingyan.baidu.com/article/636f38bb4091e4d6b84610a8.html pc6 http://www.pc6.com/edu/6278 ...

  8. Nginx 使用IP限制访问来源

    在 server {... 下, 或者在 location xxx {... 下, 都可以添加如下的IP访问限制 allow 10.57.22.172; allow ; allow ; allow ; ...

  9. JS 关闭 页面 浏览器 事件

    JS监听关闭浏览器事件关键字: js监听关闭浏览器事件Onunload与OnbeforeunloadOnunload,onbeforeunload都是在刷新或关闭时调用,可以在<script&g ...

  10. C#获取文件MD5字符串

    备注 哈希函数将任意长度的二进制字符串映射为固定长度的小型二进制字符串.加密哈希函数有这样一个属性:在计算不大可能找到散列为相同的值的两个不同的输入:也就是说,两组数据的哈希值仅在对应的数据也匹配时才 ...