Echart 仪表盘和柱形图

Stella981
• 阅读 570

我们来分布讲解:

1.首先编一写一个html,如下:

 1 <html>
 2 <body class="">
 3     <div class="container">
 4         <div class="contentDiv">
 5             <div id="ybp" style="width: 300px;height:300px;"></div>
 6         </div>
 7         <div class="contentDiv_01">
 8             <div id="zzt" style="width: 900px;height:300px;"></div>
 9         </div>
10     </div>
11 </body>
12 </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.效果图如下:

Echart 仪表盘和柱形图

5.记得要引入echart相关的js和css文件,不然看不到效果。

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
2年前
java图形验证码生成工具类及web页面校验验证码
<divid"article\_content"class"article\_contentcsdntrackingstatisticstrackingclick"datamod"popu\_519"datadsm"post"style"overflow:hidden;"<divclass"htmledit\_vi
Wesley13 Wesley13
2年前
PHP自定义 日期范围 条件筛选
Html:<divclass\"layuiinline"\<labelclass\"layuiformlabel"\登录时间:</label\<divclass\"layuiinputinline"style\"width: 140px;"\<inputtype\"date"name\"date
Stella981 Stella981
2年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
2年前
Mycat入门教程
<divid"article\_content"class"article\_contentcsdntrackingstatisticstrackingclick"datamod"popu\_519"datadsm"post"style"overflow:hidden;"<divclass"markdown\_vi
Wesley13 Wesley13
2年前
mysql+redis+memcached
<divid"mainContent"<divclass"forFlow"<divid"post\_detail"<!done<divid"topics"<divclass"post"<h1class"postTitle"<aid"cb\_post\_title\_url"class"po
Stella981 Stella981
2年前
Bootstrap 结合 PHP ,做简单的登录以及注册界面及功能
登录实现HTML代码<divclass"container"<?phpif(isset($error_msg)):?<divclass"alertalertdanger"role"alert"<?phpecho$error_msg;?</div
Stella981 Stella981
2年前
33.Docker安装Mysql及用户配置
<divclass"forFlow"<divid"post_detail"<!done<divid"topics"<divclass"post"<h1class"postTitle"<aid"cb\_post\_title\_url"class"postTitle2"
Wesley13 Wesley13
2年前
h5
1.html代码1<h3class"playerTitle"视屏播放器</h32<divclass"player"3<videosrc"../mp4/chrome.mp4"</video4<divclass"controls"5
Stella981 Stella981
2年前
SpringBoot 使用yml配置 mybatis+pagehelper+druid+freemarker实例
<divid"article\_content"class"article\_contenttrackingad"datamod"popu\_307"datadsm"post"style"overflow:hidden;"<divclass"markdown\_views"<h2id"springboot使用ym
Wesley13 Wesley13
2年前
JAVA中this用法小结
<divid"article\_content"class"article\_contentcsdntrackingstatisticstrackingclick"datamod"popu\_519"datadsm"post"style"overflow:hidden;"<divclass"htmledit\_vi