我们来分布讲解：

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. HTTP协议--MyWebServer

    HTTP协议 HTTP协议是一种Web通信协议,通过特定的规则来实现服务器跟客户端的通信.HTTP协议有这样几个特点: (1)面向无连接的,一次只能处理一个请求,HTTP1.0服务器解析完客户端请求并 ...

  2. ios之申请后台延时执行和做一个假后台的方法

    转自:http://sis hu ok.com/forum/blogCategory/showByCategory.html?categories_id=138&user_id=10385   ...

  3. 伯努利分布、二项分布、Beta分布、多项分布和Dirichlet分布与他们之间的关系，以及在LDA中的应用

    在看LDA的时候,遇到的数学公式分布有些多,因此在这里总结一下思路. 一.伯努利试验.伯努利过程与伯努利分布 先说一下什么是伯努利试验: 维基百科伯努利试验中: 伯努利试验(Bernoulli tri ...

  4. 「BZOJ」「3262」陌上花开

    CDQ分治 WA :在solve时,对y.z排序以后,没有处理「y.z相同」的情况,也就是说可能(1,2,3)这个点被放到了(2,2,3)的后面,也就是统计答案在前,插入该点在后……也就没有统计到! ...

  5. POJ训练计划2528_Mayor&#39;s posters(线段树/成段更新+离散化)

    解题报告 id=2528">地址传送门 题意: 一些海报,覆盖上去后还能看到几张. 思路: 第一道离散化的题. 离散化的意思就是区间压缩然后映射. 给你这么几个区间[1,300000] ...

  6. 解决：CentOS下的 error while loading shared libraries: libmysqlclient.so.16: cannot open shared object file: No such file or dir

    进入别人的centos,输入命令 mysql mysqladm都会报错,缺少这个共享库 libmysqlclient.so.16 . 查找下,一般都是ldconfig 没有找到共享库的位置,或者 软链 ...

  7. maven打包加时间戳

    基于Maven的项目,发布时需要打包,如tar.gz.web项目打成war格式包.每次打包时希望自己加上时间戳,假如我的项目名是myproject,默认打包后名为myproject.war.而我希望的 ...

  8. maven-shade-plugin 入门指南

    1. Why? 通过 maven-shade-plugin 生成一个 uber-jar,它包含所有的依赖 jar 包. 2. Goals Goal Description shade:help Dis ...

  9. 一些NLP相关的JD，作参考

    NLP 应用研发工程师 - AI Lab工作城市: 上海岗位描述:1.用户搜索意图识别,分词和词性标注,实体词标注 2.利用机器学习.NLP 技术优化文本分类.语义理解及信息抽取岗位要求:1.有自然语 ...

  10. Convert Sorted List to Binary Search Tree leetcode java

    题目: Given a singly linked list where elements are sorted in ascending order, convert it to a height ...