我们来分布讲解：

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

 <html>

 <body class="">

     <div class="container">

         <div class="contentDiv">

             <div id="ybp" style="width: 300px;height:300px;"></div>

         </div>

         <div class="contentDiv_01">

             <div id="zzt" style="width: 900px;height:300px;"></div>

         </div>

     </div>

 </body>

 </html>

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

$(document).ready(function() {

     // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('ybp'));

    // 指定图表的配置项和数据

    var option = {

    title: {

        text: '任务完成率', //标题文本内容

    },

    toolbox: { //可视化的工具箱

        show: true

    },

    tooltip: { //弹窗组件

        formatter: '50%'

    },

    series: [{

        name: '任务完成率',

        type: 'gauge',

        detail: {formatter:'50%'},

        data: [{value: 50%, name: '任务完成率'}]

    }]

    };

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

});

3.初始化柱形图js

var json;

var xData = ['海口','三亚','三沙','儋州','洋浦','五指山','琼海','文昌','万宁','东方','定安','屯昌','澄迈','临高','白沙','昌江','乐东','陵水','保亭','琼中'];

$(document).ready(function() {

    //初始化获取数据

    var yData = [];

    $.ajax({

        async : true,

        url : ".../xsx.do",

        type : "POST",

        dataType:'json',

        success : function(data) {

            debugger;

            json = data.data;

            initZzt(json);

        }

    });

});

function initZzt(json){

    var myChart = echarts.init(document.getElementById('zzt'));

    option = {

            title : {

                text : "检查人员数量和地区分布"

            },

            tooltip : {

                trigger : 'axis',

                showDelay : 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms

                axisPointer : {            // 坐标轴指示器，坐标轴触发有效

                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

                }

            },

            legend: {

                data:['执法人员分布总数']

            },

            calculable : true,

            xAxis : {

                axisLabel :{

                    interval:0

                },

                data : ['海口','三亚','三沙','儋州','洋浦','五指山','琼海','文昌','万宁','东方','定安','屯昌','澄迈','临高','白沙','昌江','乐东','陵水','保亭','琼中']

            },

            yAxis : {

                type : 'value'

            },

            series : [

                {

                    name:'执法人员分布总数',

                    type:'bar',

                    data:json

                }

            ]

        };

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

}

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. cocos2d-x中使用CCOrbitCamera做水平翻转

    项目中需要用到水平翻转效果,这里偷懒了-   首先翻转,它只是转到了180度,多了就觉得很奇怪了. 所以这里设定就是先从0 ~ 90度,然后再从270 ~ 360,90 – 270 视觉上是感觉不到变 ...

  2. HTML5 本地文件操作之FileSystemAPI实例（二）

    文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.we ...

  3. Ubuntu apt-get 彻底卸载软件包

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/get_set/article/details/51276609 如果你关注搜索到这篇文章,那么我可以 ...

  4. 图解 MongoDB 地理位置索引的实现原理（转）

    原文链接:图解 MongoDB 地理位置索引的实现原理 地理位置索引支持是MongoDB的一大亮点,这也是全球最流行的LBS服务foursquare 选择MongoDB的原因之一.我们知道,通常的数据 ...

  5. java实时监听日志写入kafka（转）

    原文链接:http://www.sjsjw.com/kf_cloud/article/020376ABA013802.asp 目的 实时监听某目录下的日志文件,如有新文件切换到新文件,并同步写入kaf ...

  6. 【没有注意过的细节】用scanf读一个unsigned char? %hhu 的用法

    头段时间我的代码,有一个 unsigned char,我需要从sscanf 中读取字符串为这个值.但是一般char 是用%c的,我是要值得. 所以我使用了%d %u来读,结果报警告: unsigned ...

  7. IIS 7.0 SSL 部署指南

    一.  生成证书请求 1.进入IIS控制台    进入IIS控制台,并选择服务器的服务器证书设置选项.  2.添加证书请求    进入服务器证书配置页面,并选择“创建证书申请”  3.选择加密服务提供 ...

  8. HTML5 File API 全介绍

    在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...

  9. Android -- ADT变化&aar&Lint

    Switch Case switch case 常用的使用方法: switch(v.getId()){ case R.id.btn1: doClick1(); break; } 在ADT中的改变 在正 ...

  10. mahout0.7 示例运行纪实

    http://1992mrwang.blog.51cto.com/3265935/1205282 运行太不容易了 所以要记下来以免后面忘记了 首先是数据 vim testdata.txt 第一列为Us ...