我们来分布讲解：

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. h5语音录制及上传(Java版语音聊天系统)

    Since Chrome version 47, Voice Recording works only on HTTPS sites 目前基于webikit(谷歌之类的webikit)和Gecko(F ...

  2. SSD阵列卡方案优化：考虑使用RAID 50替代RAID 10

    最近一直在研究RAID 50,因为牺牲一半的容量的RAID 10代价实在太大了,而且它提供的可用性也并不是百分百的,我们首先来看下RAID 10的可用性分析: 以同等容量的不同RAID方式作为案例分析 ...

  3. 迷宫问题的C语言求解

    1 .Preface /** * There have been many data to introduce the algorithm. So I will try to simply expla ...

  4. Tornado开发技巧，简单了解tornado

    tornado基础入门(一)——简单了解tornado 参考:http://demo.pythoner.com/itt2zh/ch1.html tornado是一个轻量级的web框架,是一个用pyth ...

  5. C#中的命名空间namespace与Java中的包package之间的区别

    Java 包被用来组织文件或公共类型以避免类型冲突.包结构可以映射到文件系统. System.Security.Cryptography.AsymmetricAlgorithm aa; 可能被替换: ...

  6. [Link]Gearman分布式任务处理系统

    http://blog.csdn.net/jiao_fuyou/article/category/1745977 http://www.cnblogs.com/cocowool/archive/201 ...

  7. git如何删除远端不存在的本地分支？

    问题:远端分支删除后,如何删除之前拉取的本地分支? 答案: git fetch -p git remote show origin 可以查看remote地址,远程分支,还有本地分支与之相对应关系等信息 ...

  8. python文档生成工具：pydoc、sphinx；django如何使用sphinx？

    文档生成工具: 自带的pydoc,比较差 建议使用sphinx 安装: pip install sphinx 安装主题: 由各种主题,我选择常用的sphinx_rtd_theme pip instal ...

  9. [填坑]解决"Your MaintenanceTool appears to be older than 3.0.2. ."问题

    之前我写过QT5.9版本在更新组件时出现“要继续此操作,至少需要一个有效且已启用的储存库”问题,得到了网友的热心转载,说明遇到此问题的人不在少数. 原文地址:https://blog.csdn.net ...

  10. android 框架层 常用类介绍

    名称 功能描述 示意图 activitymanager 管理应用程序的周期并提供常用的回退功能 window manager 窗口管理者 content provider 用于访问另一个的数据,或者共 ...