我们来分布讲解：

1.首先编一写一个html，如下：

  1.  <html>
  2.  <body class="">
  3.      <div class="container">
  4.          <div class="contentDiv">
  5.              <div id="ybp" style="width: 300px;height:300px;"></div>
  6.          </div>
  7.          <div class="contentDiv_01">
  8.              <div id="zzt" style="width: 900px;height:300px;"></div>
  9.          </div>
  10.      </div>
  11.  </body>
  12.  </html>

2.然后开始初始化仪表盘

  1. $(document).ready(function() {
  2.  
  3.      // 基于准备好的dom，初始化echarts实例
  4.     var myChart = echarts.init(document.getElementById('ybp'));
  5.  
  6.     // 指定图表的配置项和数据
  7.     var option = {
  8.     title: {
  9.         text: '任务完成率', //标题文本内容
  10.     },
  11.     toolbox: { //可视化的工具箱
  12.         show: true
  13.     },
  14.     tooltip: { //弹窗组件
  15.         formatter: '50%'
  16.     },
  17.     series: [{
  18.         name: '任务完成率',
  19.         type: 'gauge',
  20.         detail: {formatter:'50%'},
  21.         data: [{value: 50%, name: '任务完成率'}]
  22.     }]
  23.  
  24.     };
  25.  
  26.     // 使用刚指定的配置项和数据显示图表。
  27.     myChart.setOption(option);
  28. });

3.初始化柱形图js

  1. var json;
  2. var xData = ['海口','三亚','三沙','儋州','洋浦','五指山','琼海','文昌','万宁','东方','定安','屯昌','澄迈','临高','白沙','昌江','乐东','陵水','保亭','琼中'];
  3. $(document).ready(function() {
  4.     //初始化获取数据
  5.     var yData = [];
  6.     $.ajax({
  7.         async : true,
  8.         url : ".../xsx.do",
  9.         type : "POST",
  10.         dataType:'json',
  11.         success : function(data) {
  12.             debugger;
  13.             json = data.data;
  14.             initZzt(json);
  15.         }
  16.     });
  17. });
  18.  
  19. function initZzt(json){
  20.     var myChart = echarts.init(document.getElementById('zzt'));
  21.     option = {
  22.             title : {
  23.                 text : "检查人员数量和地区分布"
  24.             },
  25.             tooltip : {
  26.                 trigger : 'axis',
  27.                 showDelay : 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
  28.                 axisPointer : {            // 坐标轴指示器，坐标轴触发有效
  29.                     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  30.                 }
  31.             },
  32.             legend: {
  33.                 data:['执法人员分布总数']
  34.             },
  35.             calculable : true,
  36.             xAxis : {
  37.                 axisLabel :{
  38.                     interval:0
  39.                 },
  40.                 data : ['海口','三亚','三沙','儋州','洋浦','五指山','琼海','文昌','万宁','东方','定安','屯昌','澄迈','临高','白沙','昌江','乐东','陵水','保亭','琼中']
  41.             },
  42.             yAxis : {
  43.                 type : 'value'
  44.             },
  45.             series : [
  46.                 {
  47.                     name:'执法人员分布总数',
  48.                     type:'bar',
  49.                     data:json
  50.                 }
  51.             ]
  52.         };
  53.  
  54.     // 使用刚指定的配置项和数据显示图表。
  55.     myChart.setOption(option);
  56. }

4.效果图如下：

5.记得要引入echart相关的js和css文件，不然看不到效果。

Echart 仪表盘和柱形图的更多相关文章

  1. Qt编写echart仪表盘JS交互程序支持webkit和webengine（开源）

    Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,是本人用过的国产作品中最牛逼的,记得四五年前就在qt中使用过,当时用的浏览器控件是webkit,由于5.6以后的版本不再支持webk ...

  2. 奥威软件Speed-BI荣获2016年度中国大数据最佳云平台奖

    (原文转自:http://www.powerbi.com.cn/page110?article_id=210) 2016年12月16日,“科技原力觉醒,引领创新巅峰”—2016创新影响力年会暨国家产业 ...

  3. 关于echart柱形图的使用问题

    关于一个数据对应两个值的问题 series: [{ name: '数量(个)', type: 'bar', barWidth: '30%', barGap: , //两个数据条没有间距 data: y ...

  4. echart分组柱形图绑定数据

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts </ ...

  5. echart 折线渐变 加柱形图结合图形，左右纵轴自设置格式，现行图北京渐变 ，x轴字体倾斜

    app.title = '折柱混合'; option = { grid: { left: '5%', //距离左边的距离 right: '5%', //距离右边的距离 top:'8%', bottom ...

  6. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  7. EChart使用

    EChart ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...

  8. java 版本EChart使用

    一.简介 EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计.该种方式js在页面动态拼接json数据,再进行渲染.这种方法的优点是,灵活,可以随时进行修改.缺点 ...

  9. Echart - 地图散点图(服务网点图)的实现

    Echart是百度开发的一个javascript图表库,可以流程运行于pc和移动端,底层依赖轻量级的 Canvas 类库 ZRender. ECharts 提供了常规的折线图,柱状图,散点图,饼图,K ...

随机推荐

  1. android BitmapDrawable的使用

    <span style="font-size:18px;"> //功能:显示缩略图,大小为40*40 //通过openRawResource获取一个inputStrea ...

  2. [转]PHP利用Gearman来处理并行多进程问题

    From : http://www.yuansir-web.com/2013/11/25/php%E5%88%A9%E7%94%A8gearman%E6%9D%A5%E5%A4%84%E7%90%86 ...

  3. 【google chrome 一键打开 谷歌跳转的页面+JS Replace】谷歌无法打开网页的时候，提取网页中url的部分

    经常在谷歌搜索,遇到网页无法打开,然后就停留在比如:http://www.google.com.hk/search?newwindow=1&safe=strict&site=& ...

  4. JavaScriptSerializer 类

    ylbtech-.Net-Class:JavaScriptSerializer 类 应对 Json.NET 使用序列化和反序列化. 为启用 AJAX 的应用程序提供序列化和反序列化功能. 1.实例返回 ...

  5. .NET程序性能优化的基本要领

    Bill Chiles(Roslyn编译器的程序经理)写了一篇文章<Essential Performance Facts and .NET Framework Tips>,知名博主寒江独 ...

  6. Anciroid的IPC机制-Binder原理

    Binder驱动的原理和实现 通过上一节的介绍,大家应该对Binder有了基本的认识了.任何上层应用程序接口和用户操作都需要底层硬件设备驱动的支持,并为其提供各种操作接口.本节首先从Binder的驱动 ...

  7. 在SAE分布式服务上开发需要解决的问题

    这是在开发“幸运猜数”微信游戏的时候遇到的问题 对游戏感兴趣的,可以关注微信公众ID: EasyTool 回复[幸运猜数]开始游戏 之前提供的功能:[黄金][双色球][记事]等,都是无状态服务 而开发 ...

  8. Arrow functions and the ‘this’ keyword

    原文:https://medium.freecodecamp.org/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keywo ...

  9. docker swarm join如何获取token

    在运行docker swarm join的时候需要一个token参数,如何知道这个参数那? [答案] Join as a worker node To retrieve the join comman ...

  10. WIN10系统如何使用传统WIN7开始菜单

    安装StartlsBack 默认按WIN键就可以回到WIN7的菜单了 右击WIN可以点击属性,详细设置菜单样式