我们来分布讲解：

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. 常见排序的JAVA实现和性能测试

    五种常见的排序算法实现 算法描述 1.插入排序 从第一个元素开始,该元素可以认为已经被排序 取出下一个元素,在已经排序的元素序列中从后向前扫描 如果该元素(已排序)大于新元素,将该元素移到下一位置 重 ...

  2. 用ArrayAdapter来创建Spinner（自定义布局、默认布局、动态内容、静态内容）

             android:dropDownWidth 下拉列表宽度 android:dropDownHorizontalOffset 下拉列表距离左边的距离 android:dropDownV ...

  3. MYSQL中group_concat有长度限制！默认1024(转载)

    在mysql中,有个函数叫“group_concat”,平常使用可能发现不了问题,在处理大数据的时候,会发现内容被截取了,其实MYSQL内部对这个是有设置的,默认不设置的长度是1024,如果我们需要更 ...

  4. Logstash使用jdbc_input同步Mysql数据时遇到的空时间SQLException问题

    今天在使用Logstash的jdbc_input插件同步Mysql数据时,本来应该能搜索出10条数据,结果在Elasticsearch中只看到了4条,终端中只给出了如下信息 [2017-08-25T1 ...

  5. 关于Java中的equals方法

    关于Java中的equals方法 欢迎转载,但是请填写本人的博客园原址https://www.cnblogs.com/JNovice/p/9347099.html 一.什么是equals方法 equa ...

  6. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  7. 利用rest-framework实现django应用的分页功能

    自定义分页的类,继承 PageNumberPagination class StandardResultsSetPagination(PageNumberPagination): page_size ...

  8. FIR滤波原理及verilog设计

    FIR(Finite Impulse Response)Filter:有限冲激响应滤波器,又称为非递归线性滤波器. FIR滤波器的冲击响应是一个值为滤波器抽头系数的采样序列,其脉冲响应由有限个采样值构 ...

  9. Triangle leetcode java

    题目: Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjace ...

  10. centos7 开机自动连网

    新安装好的CentOS7桌面版,默认的网络都是关闭的,在图形页面中,开启后,重启后网络又关闭了.下面配置开机自动连网. 工具/原料   CentOS7.2 方法/步骤     首先打开终端,用ifco ...