我们来分布讲解：

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. blob转base64位 base64位转blob

    //**dataURL to blob** function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0]. ...

  2. 绝望的主妇第一二三季/Desperate Housewives迅雷下载

    绝望主妇 第一二三季 Desperate Housewives Season 1 2 3(2004 2005 2006) 本季看点:在紫藤街上住着这样一群主妇:拥有四个孩子和一个如孩子一般的丈夫的女强 ...

  3. HTML5 本地文件操作之FileSystemAPI简介

    一.FileSystemAPI简介 HTML5的文件操作Api中 1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考 2.FileSystemAPI ...

  4. [转]memcached+magent实现memcached集群

    From : http://www.cnblogs.com/happyday56/p/3461113.html 首先说明下memcached存在如下问题 本身没有内置分布式功能,无法实现使用多台Mem ...

  5. [转]php使用 memcache 来存储 session

    转自:http://koda.iteye.com/blog/466667 Memcache和PHP memcach扩展安装请见http://koda.iteye.com/blog/665761 设置s ...

  6. ＢＺＯＪ3916: [Baltic2014]friends

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3916 题解:随便hash．刚开始看错题WA了N发．(我连双hash都写了!) 代码: #inc ...

  7. 2.1 jdk-spi的实现原理

    dubbo-spi是在jdk-spi的基础上进行重写优化,下面看一下jdk-spi. 一.作用 为接口自动寻找实现类. 二.实现方式 标准制定者制定接口 不同厂商编写针对于该接口的实现类,并在jar的 ...

  8. [leetcode]Add Binary @ Python

    原题地址:https://oj.leetcode.com/problems/add-binary/ 题意: Given two binary strings, return their sum (al ...

  9. 性能优化 BlockCanary 卡顿监测 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. CentOS7配置Mysql热备份

    Mysql 的安装: 本人习惯讲安装包放在 /usr/local/src/ ①.[root@localhost ~]#cd /usr/local/src/ ②.[root@localhostsrc]# ...