天天看点
返回

基于Echarts实现可视化数据大屏设备环境监测平台

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

文章目录

  • ​​前言​​
  • ​​一、Echart是什么​​
  • ​​二、ECharts入门教程​​
  • ​​三、作品演示​​
  • ​​四、代码实现​​
  • ​​1.HTML​​
  • ​​2.CSS​​
  • ​​3.JavaScript​​
  • ​​五、更多干货​​

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

​​5 分钟上手ECharts​​

三、作品演示

四、代码实现

1.HTML 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <title>设备环境监测平台大数据</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/rem.js"></script>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script src="js/guangxi.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <div class="t_container">
        <header class="t_header">
            <span>设备环境监测平台</span>
        </header>
        <main class="t_main">
            <div class="t_left_box">
                <img class="t_l_line" src="img/left_line.png" alt="">
                <div class="t_mbox t_rbox">
                    <i></i>
                    <span>本月订单数</span>
                    <h2>18000</h2>
                </div>
                <div class="t_mbox t_gbox">
                    <i></i>
                    <span>本月新增会员</span>
                    <h2>1000</h2>
                </div>
                <div class="t_mbox t_ybox">
                    <i></i>
                    <span>一次消费会员</span>
                    <h2>600</h2>
                </div>
                <img class="t_r_line" src="img/right_line.png" alt="">
            </div>
            <div class="t_center_box">
                <div class="t_top_box">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <ul class="t_nav">
                        <li>
                            <span>设备数</span>
                            <h1>500</h1>
                            <i></i>
                        </li>
                        <li>
                            <span>上月设备增加数</span>
                            <h1>30</h1>
                            <i></i>
                        </li>
                        <li>
                            <span>增值率</span>
                            <h1>75%</h1>
                        </li>
                    </ul>
                    <img class="t_r_line" src="img/right_line.png" alt="">
                </div>
                <div class="t_bottom_box">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <div id="chart_3" class="echart" style="width: 100%; height: 3.6rem;"></div>
                    <img class="t_r_line" src="img/right_line.png" alt="">
                </div>
            </div>
            <div class="t_right_box">
                <img class="t_l_line" src="img/left_line.png" alt="">
                <div id="chart_4" class="echart" style="width: 50%; height: 4.6rem; position: absolute;"></div>
                <header class="t_b_h">
                    <span>开关次数</span>
                    <img src="img/end.png"></img>
                    <h3>15<span>次</span></h3>
                </header>
                <main class="t_b_m">
                    <img src="img/map.png" alt="">
                    <div class="t_b_box">
                        <span>溫度</span>
                        <i></i>
                        <h2>23℃</h2>
                    </div>
                    <div class="t_b_box1">
                        <span>湿度</span>
                        <i></i>
                        <h2>56RH</h2>
                    </div>
                    <div class="t_b_box2">
                        <span>信号</span>
                        <i></i>
                        <h2>-90dBm</h2>
                    </div>
                    <div class="t_b_box3">
                        <span>光线</span>
                        <i></i>
                        <h2>250LX</h2>
                    </div>
                </main>
                <img class="t_r_line" src="img/right_line.png" alt="">
            </div>
            <div class="b_left_box">
                <img class="t_l_line" src="img/left_line.png" alt="">
                <div id="chart_2" class="echart" style="width: 100%; height: 3.6rem;"></div>
                <img class="t_r_line" src="img/right_line.png" alt="">
            </div>
            <div class="b_center_box">
                <img class="t_l_line" src="img/left_line.png" alt="">
                <div id="chart_1" class="echart" style="width: 100%; height: 3.6rem;"></div>
                <img class="t_r_line" src="img/right_line.png" alt="">
            </div>
            <div class="b_right_box">
                <img class="t_l_line" src="img/left_line.png" alt="">
                <h1 class="t_title">设备维保数据查看</h1>
                <table class="t_table">
                    <thead>
                        <tr>
                            <th>维护时间</th>
                            <th>维保人</th>
                            <th>维保电话</th>
                            <th>更换水量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2018-02-06</td>
                            <td>张伟</td>
                            <td>13111345462</td>
                            <td>1000ml</td>
                        </tr>
                        <tr>
                            <td>2018-02-06</td>
                            <td>张伟</td>
                            <td>13111345462</td>
                            <td>1000ml</td>
                        </tr>
                        <tr>
                            <td>2018-02-06</td>
                            <td>张伟</td>
                            <td>13111345462</td>
                            <td>1000ml</td>
                        </tr>
                        <tr>
                            <td>2018-02-06</td>
                            <td>张伟</td>
                            <td>13111345462</td>
                            <td>1000ml</td>
                        </tr>
                        <tr>
                            <td>2018-02-06</td>
                            <td>张伟</td>
                            <td>13111345462</td>
                            <td>1000ml</td>
                        </tr>
                    </tbody>
                </table>
                <img class="t_r_line" src="img/right_line.png" alt="">
            </div>
        </main>
    </div>
</body>

</html>

2.CSS 

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100px;
}

ul,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    list-style: 0;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

body {
    background-color: #212121;
}

/*正文*/

.t_container {
    width: 100%;
    height: 100%;
    min-width: 1360px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    min-height: 756px;
}

.t_header {
    width: 100%;
    height: 80px;
    background: url('../img/linx.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.t_header span {
    color: #fff;
    font-size: 0.36rem;
    position: absolute;
    top: 50%;
    margin-top: -0.24rem;
    left: 9%;
}

.t_main {
    width: 98%;
    height: 8.74rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    margin-bottom: 0;
}

.t_left_box {
    position: relative;
    width: 3.36rem;
    height: 4.6rem;
    display: inline-block;
    text-align: center;
}

.t_l_line {
    position: absolute;
    top: 0;
    left: 0;
}

.t_r_line {
    position: absolute;
    bottom: 0;
    right: 0;
}

.t_center_box {
    width: 6.82rem;
    display: inline-block;
    min-width: 490px;
}

.t_top_box {
    width: 100%;
    height: 1.13rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.2rem;
}

.t_bottom_box {
    width: 100%;
    height: 3.17rem;
    overflow: hidden;
    position: relative;
}

.t_right_box {
    display: inline-block;
    width: 7.8rem;
    height: 4.6rem;
    position: relative;
    min-width: 560px;
}

.b_left_box {
    display: inline-block;
    width: 5.9rem;
    height: 3.6rem;
    position: relative;
    min-width: 425px;
}

.b_center_box {
    display: inline-block;
    width: 6rem;
    height: 3.6rem;
    position: relative;
    min-width: 432px;
}

.b_right_box {
    display: inline-block;
    width: 6rem;
    height: 3.6rem;
    position: relative;
    min-width: 432px;
}

.t_mbox {
    width: 3rem;
    height: 1.28rem;
    position: relative;
    margin: 0 auto;
    margin-top: 0.2rem;
}

.t_rbox {
    background: #D9523F;
}

.t_gbox {
    background: #13D0B2;
}

.t_ybox {
    background: #F6A645;
}

.t_mbox i {
    display: inline-block;
    width: 0.46rem;
    height: 0.48rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20%;
    margin: auto;
}

.t_mbox h2 {
    font-size: 0.28rem;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
}

.t_mbox span {
    font-size: 0.2rem;
    color: #fff;
    position: absolute;
    top: 24%;
    left: 48%;
}

.t_rbox i {
    background: url(../img/indent.png) no-repeat;
    background-size: 100% 100%;
}

.t_gbox i {
    background: url(../img/vip.png) no-repeat;
    background-size: 100% 100%;
}

.t_ybox i {
    background: url(../img/consumption.png) no-repeat;
    background-size: 100% 100%;
}

.t_nav {
    width: 100%;
    height: 100%;
}

.t_nav li {
    display: inline-block;
    width: 30%;
    height: 100%;
    text-align: center;
    position: relative;
}

.t_nav li span {
    font-size: 0.16rem;
    color: #1AA1FD;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 25%;
}

.t_nav li h1 {
    font-size: 0.30rem;
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
}

.t_nav li i {
    width: 1px;
    height: 100%;
    position: absolute;
    right: -0.2rem;
    background: url('../img/sper.png') no-repeat;
    background-size: 100% 100%;
}

.t_table {
    font-size: 0.16rem;
    color: #fff;
    width: 94%;
    margin: 0 auto;
    border-spacing: 0;
    text-align: center;
    box-sizing: border-box;
    margin-top: 12%;
}

.t_table tr {
    margin: 0;
    padding: 0;
    height: 0.42rem;
}

.t_table thead tr {
    background: #053A98;
}

.t_table tbody tr td:first-child {
    border-left: 1px solid #053A98;
}

.t_table td {
    border-bottom: 1px solid #053A98;
    border-right: 1px solid #053A98;
}

.t_title {
    position: absolute;
    font-size: 0.18rem;
    color: #fff;
    left: 5%;
    top: 10%;
}

.t_b_h,
t_b_m {
    position: absolute;
    font-size: 0.16rem;
    left: 54%;
    width: 50%;
    height: 4.6rem;
}

.t_b_h span {
    position: absolute;
    color: #fff;
    top: 10%;
}

.t_b_h img {
    position: absolute;
    width: 0.53rem;
    height: 0.53rem;
    top: 6%;
    left: 24%
}

.t_b_h h3 {
    font-size: 0.36rem;
    color: #F0FF00;
    position: absolute;
    left: 55%;
    top: 8%;
    width: 1rem;
}

.t_b_h h3 span {
    font-size: 0.2rem;
    position: absolute;
    left: 50%;
    top: 28%;
    color: #0072FF;
}

.t_b_m img {
    position: absolute;
    left: 52%;
    top: 22%;
    border-top: 1px dotted #F0FF00;
    padding: 0 0.18rem;
    padding-top: 20px;
    width: 3.19rem;
    height: 1.67rem;
}

.t_b_box,
.t_b_box1,
.t_b_box2,
.t_b_box3 {
    width: 1.3rem;
    height: 0.56rem;
    border: 1px dotted #F0FF00;
    border-radius: 5px;
    position: absolute;
}

.t_b_box {
    top: 68%;
    left: 56%;
}

.t_b_box span,
.t_b_box1 span,
.t_b_box2 span,
.t_b_box3 span {
    font-size: 0.14rem;
    color: #fff;
    position: absolute;
    left: 10%;
}

.t_b_box i,
.t_b_box1 i,
.t_b_box2 i,
.t_b_box3 i {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 15%
}

.t_b_box i {
    background: url('../img/t.png') no-repeat;
    background-size: 100% 100%;
}

.t_b_box1 i {
    background: url('../img/s.png') no-repeat;
    background-size: 100% 100%;
}

.t_b_box2 i {
    background: url('../img/j.png') no-repeat;
    background-size: 100% 100%;
}

.t_b_box3 i {
    background: url('../img/g.png') no-repeat;
    background-size: 100% 100%;
}

.t_b_box h2,
.t_b_box1 h2,
.t_b_box2 h2,
.t_b_box3 h2 {
    font-size: 0.18rem;
    color: #fff;
    position: absolute;
    top: 30%;
    left: 40%;
}

.t_b_box1 {
    top: 68%;
    left: 78%;
}

.t_b_box2 {
    top: 84%;
    left: 56%;
}

.t_b_box3 {
    top: 84%;
    left: 78%;
}

3.JavaScript 

$(function() {
    echart_1();
    echart_2();
    echart_3();
    echart_4();

    function echart_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_1'));
        option = {
            title: {
                text: '本月设备状态统计',
                top: 35,
                left: 20,
                textStyle: {
                    fontSize: 18,
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",

            },
            legend: {
                right: 20,
                top: 35,
                data: ['故障', '正常'],
                textStyle: {
                    color: '#fff'
                }
            },
            series: [{
                name: '设备状态',
                type: 'pie',
                radius: ['0', '60%'],
                center: ['50%', '60%'],
                color: ['#e72325', '#98e002', '#2ca3fd'],
                label: {
                    normal: {
                        formatter: '{b}\n{d}%'
                    },

                },
                data: [{
                        value: 6,
                        name: '故障'
                    },
                    {
                        value: 50,
                        name: '正常',
                        selected: true
                    }
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    }

    function echart_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_2'));
        var data = {
            id: 'multipleBarsLines',
            title: '2018年前半年检测统计',
            legendBar: ['正面占比', '中立占比', '负面占比'],
            symbol: '', //数值是否带百分号        --默认为空 ''
            legendLine: ['同期对比'],
            xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
            yAxis: [
                [8, 10, 10, 11, 4, 13]
            ],
            lines: [
                [10, 10, 9, 11, 7, 4]
            ],
            barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数
            lineColor: ['#D9523F'], // 折线颜色

        };
        /end/

        var myData = (function test() {
            var yAxis = data.yAxis || [];
            var lines = data.lines || [];
            var legendBar = data.legendBar || [];
            var legendLine = data.legendLine || [];
            var symbol = data.symbol || ' ';
            var seriesArr = [];
            var legendArr = [];
            yAxis && yAxis.forEach((item,) => {
                legendArr.push({
                    name: legendBar && legendBar.length > 0 && legendBar[index]
                });
                seriesArr.push({
                    name: legendBar && legendBar.length > 0 && legendBar[index],
                    type: 'bar',
                    barGap: '0.5px',
                    data: item,
                    barWidth: data.barWidth || 12,
                    label: {
                        normal: {
                            show: true,
                            formatter: '{c}' + symbol,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                textAlign: 'left',
                                fontSize: 11,
                            },
                        },
                    },
                    itemStyle: { //图形样式
                        normal: {
                            barBorderRadius: 4,
                            color: data.barColor[index]
                        },
                    }
                });
            });

            lines && lines.forEach((item,) => {
                legendArr.push({
                    name: legendLine && legendLine.length > 0 && legendLine[index]
                })
                seriesArr.push({
                    name: legendLine && legendLine.length > 0 && legendLine[index],
                    type: 'line',
                    data: item,
                    itemStyle: {
                        normal: {
                            color: data.lineColor[index],
                            lineStyle: {
                                width: 3,
                                type: 'solid',
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: false, //折线上方label控制显示隐藏
                            position: 'top',
                        }
                    },
                    symbol: 'circle',
                    symbolSize: 10
                });
            });

            return {
                seriesArr,
                legendArr
            };
        })();


        option = {
            title: {
                show: true,
                top: '10%',
                left: '3%',
                text: data.title,
                textStyle: {
                    fontSize: 18,
                    color: '#fff'
                },
                subtext: data.subTitle,
                link: ''
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    var time = '';
                    var str = '';
                    for (var i of params) {
                        time = i.name.replace(/\n/g, '') + '<br/>';
                        if (i.data == 'null' || i.data == null) {
                            str += i.seriesName + '：无数据' + '<br/>'
                        } else {
                            str += i.seriesName + '：' + i.data + symbol + '%<br/>'
                        }

                    }
                    return time + str;
                },
                axisPointer: {
                    type: 'none'
                },
            },
            legend: {
                right: data.legendRight || '30%',
                top: '12%',
                right: '5%',
                itemGap: 16,
                itemWidth: 10,
                itemHeight: 10,
                data: myData.legendArr,
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                }
            },
            grid: {
                x: 30,
                y: 80,
                x2: 30,
                y2: 60,
            },
            xAxis: {
                type: 'category',
                data: data.xAxis,
                axisTick: {
                    show: false,
                },

                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1AA1FD',
                    },
                    symbol: ['none', 'arrow']
                },
                axisLabel: {
                    show: true,
                    interval: '0',
                    textStyle: {
                        lineHeight: 16,
                        padding: [2, 2, 0, 2],
                        height: 50,
                        fontSize: 12,
                    },
                    rich: {
                        Sunny: {
                            height: 50,
                            // width: 60,
                            padding: [0, 5, 0, 5],
                            align: 'center',
                        },
                    },
                    formatter: function(params,) {
                        var newParamsName = "";
                        var splitNumber = 5;
                        var paramsNameNumber = params && params.length;
                        if (paramsNameNumber && paramsNameNumber <= 4) {
                            splitNumber = 4;
                        } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
                            splitNumber = 4;
                        } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
                            splitNumber = 5;
                        } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
                            splitNumber = 5;
                        } else {
                            params = params && params.slice(0, 15);
                        }

                        var provideNumber = splitNumber; //一行显示几个字
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;
                            }

                        } else {
                            newParamsName = params;
                        }
                        params = newParamsName;
                        return '{Sunny|' + params + '}';
                    },
                    color: '#1AA1FD',
                },

            },
            yAxis: {
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1AA1FD',
                    },
                    symbol: ['none', 'arrow']
                },
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#1AA1FD',
                        type: 'solid'
                    },
                }
            },
            series: myData.seriesArr
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    }

    function echart_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_3'));

        function showProvince() {
            var geoCoordMap = {
                '河池': [108.085179, 24.700488],
                '柳州': [109.412578, 24.354875],
                '梧州': [111.323462, 23.478238],
                '南宁': [108.359656, 22.81328],
                '北海': [109.171374, 21.477419],
                '崇左': [107.347374, 22.377503]
            };
            var data = [{
                    name: '河池',
                    value: 100
                },
                {
                    name: '柳州',
                    value: 100
                },
                {
                    name: '梧州',
                    value: 100
                },
                {
                    name: '北海',
                    value: 100
                },
                {
                    name: '崇左',
                    value: 100
                }
            ];
            var max = 480,
                min = 9; // todo 
            var maxSize4Pin = 100,
                minSize4Pin = 20;
            var convertData = function(data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };

            myChart.setOption(option = {
                title: {
                    text: '设备分布',
                    subtext: '',
                    x: 'center',
                    textStyle: {
                        color: '#FFF'
                    },
                    left: '6%',
                    top: '10%'
                },
                legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    data: ['pm2.5'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {}
                },
                geo: {
                    show: true,
                    map: 'guangxi',
                    mapType: 'guangxi',
                    label: {
                        normal: {},
                        //鼠标移入后查看效果
                        emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    //鼠标缩放和平移
                    roam: true,
                    itemStyle: {
                        normal: {
                            //              color: '#ddd',
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(   47,79,79, .1)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#389BB7',
                            borderWidth: 0
                        }
                    }
                },
                series: [{
                        name: 'light',
                        type: 'map',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        itemStyle: {
                            normal: {
                                color: '#F4E925'
                            }
                        }
                    },
                    {
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin',
                        symbolSize: function(val) {
                            var a = (maxSize4Pin - minSize4Pin) / (max - min);
                            var b = minSize4Pin - a * min;
                            b = maxSize4Pin - a * max;
                            return a * val[2] + b;
                        },
                        label: {
                            normal: {
                                // show: true,
                                // textStyle: {
                                //     color: '#fff',
                                //     fontSize: 9,
                                // }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F62157', //标志颜色
                            }
                        },
                        zlevel: 6,
                        data: convertData(data),
                    },
                    {
                        name: 'light',
                        type: 'map',
                        mapType: 'hunan',
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#FFFFFF',
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        animation: false,
                        data: data
                    },
                    {
                        name: ' ',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function(a,) {
                            return b.value - a.value;
                        }).slice(0, 5)),
                        symbolSize: function(val) {
                            return val[2] / 10;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#05C3F9',
                                shadowBlur: 10,
                                shadowColor: '#05C3F9'
                            }
                        },
                        zlevel: 1
                    },

                ]
            });
        }
        showProvince();

        // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    }

    function echart_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_4'));
        var data = [70, 34, 60, 78, 69];
        var titlename = ['1号机', '2号机', '3号机', '4号机', '5号机'];
        var valdata = [702, 406, 664, 793, 505];
        var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
        option = {
            title: {
                text: '设备使用频率',
                x: 'center',
                textStyle: {
                    color: '#FFF'
                },
                left: '6%',
                top: '10%'
            },
            //图标位置
            grid: {
                top: '20%',
                left: '32%'
            },
            xAxis: {
                show: false
            },
            yAxis: [{
                show: true,
                data: titlename,
                inverse: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    formatter: (value,) => {
                        return [

                            `{lg|${index+1}}  ` + '{title|' + value + '} '
                        ].join('\n')
                    },
                    rich: {
                        lg: {
                            backgroundColor: '#339911',
                            color: '#fff',
                            borderRadius: 15,
                            // padding: 5,
                            align: 'center',
                            width: 15,
                            height: 15
                        },
                    }
                },


            }, {
                show: true,
                inverse: true,
                data: valdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },

            }],
            series: [{
                name: '条',
                type: 'bar',
                yAxisIndex: 0,
                data: data,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: function(params) {
                            var num = myColor.length;
                            return myColor[params.dataIndex % num]
                        },
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}%'
                    }
                },
            }, {
                name: '框',
                type: 'bar',
                yAxisIndex: 1,
                barGap: '-100%',
                data: [100, 100, 100, 100, 100],
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: 'none',
                        borderColor: '#00c1de',
                        borderWidth: 3,
                        barBorderRadius: 15,
                    }
                }
            }, ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // window.addEventListener("resize", function () {
        //     myChart.resize();
        // });
    }
});
echarts大数据 vue+echarts 大屏数据可视化 echart数据可视化 echarts地图
上一篇: PHP中重载是什么PHP中重载是什么
下一篇: 数据结构 串(顺序存储)的基本操作

继续阅读