使用Echart做数据可视化智能大屏2_echart 大屏可视化

作者：天景科技苑 | 2024-06-21 12:16:25

踩

echart 大屏可视化

1. Echarts-介绍

常见的数据可视化库:

- D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)

- ECharts.js 百度出品的一个开源 Javascript 数据可视化库

- Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用

- AntV 蚂蚁金服全新一代数据可视化解决方案等等

- Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 [ZRender](https://github.com/ecomfe/zrender),提供直观,交互丰富,可高度个性化定制的数据可视化图官网地址: https://www.echartsjs.com/zh/index.html 表.

2. 使用步骤:

Echarts官网地址: https://www.echartsjs.com/zh/index.html

下载并引入echarts 插件文件到html页面中
准备一个具备大小的DOM容器（必须有高度和宽度）
初始化echarts实例对象 var myChart = echarts.init(document.getElementById('main'))
指定配置项和数据(option）
将配置项设置给echarts实例对象

举个例子：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <!-- 第二步: 准备一个具备大小的DOM容器 -->
    <div class="box"></div>
    <!-- 第一步: 下载并引入echarts.js文件 -->
    <script src="js/echarts.min.js"></script>
    <script>
        // 第三步: 初始化实例对象  echarts.init(dom容器)
        var myChart = echarts.init(document.querySelector(".box"))
        // 第四步: 指定图标的配置项和数据
        var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
    //   第五步: 把配置项给实例对象
    myChart.setOption(option)
    </script>
</body>
</html>

需要了解的主要配置:series、xAxis、yAxis、grid、tooltip、title、legend、color

series:系列列表.每个系列通过 type 决定自己的图表类型 [{}]
xAxis:直角坐标系 grid 中的 x 轴
yAxis:直角坐标系 grid 中的 y 轴
grid:直角坐标系内绘图网格
title:标题组件
tooltip:提示框组件
legend:图例组件
color:调色盘颜色列表，是数组
toolbox: 工具栏

注：若 series 里有 name 值，那么 legend 里的 data 可以删除。

3. 柱状图图标

立即执行函数的妙用：为了防止变量污染，减少命名冲突，可以采取立即执行函数的写法，因为里面的变量都是局部变量。

在html中引入echarts.min.js


<div class="panel bar">
    <h2>柱形图</h2>
    <div class="chart">图标</div>
</div>
 
<script src="js/echarts.min.js"></script>
<script src="js/index.js"></script>


// 柱状图模块1
(function () {
    // 1,实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"))
    // 2.指定配置项与数据、
    var option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器,坐标轴触发有效
                type: 'shadow',  //默认为line直线
            }
        },
        // 修改图表大小
        grid: {
            left: '0%',
            top: "10px",
            right: '0%',
            bottom: '4%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ["旅游", "教育", "游戏", "医疗", "电商", "社交", "金融"],
                axisTick: {
                    alignWithLabel: true
                },
                // 修改刻度标签相关样式
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                },
                // 不显示坐标轴的线
                axisLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                // 修改刻度标签相关样式
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                },
                // y轴线条改为2px
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 2
                    }
                },
                // y轴分割线的样式
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '35%',
                data: [200, 300, 300, 900, 1500, 1200, 600],
                itemStyle: {
                    // 修改柱子圆角
                    barBorderRadius: 5
                }
            }
        ]
    };
    // 3. 把配置项给实例对象
    myChart.setOption(option)
    // 4. 让图标跟随屏幕自动的去自适应
    window.addEventListener("resize",function(){
        myChart.resize()
    })
})();

4. 折线图


<div class="panel line2">
    <h2>折线图</h2>
    <div class="chart">图标</div>
</div>


(function () {
    var myChart = echarts.init(document.querySelector(".line2 .chart"))
    var option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255, 255, 255, .5)",
                fontSize: 12
            },
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.2)"
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
 
            }
        ],
        series: [
            {
                name: 'Email',
                type: 'line',
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40],
                lineStyle: {  //单独修改当前线条的样式
                    color: "#0184d5",
                    width: 2
                },
                areaStyle: {   //填充颜色设置
                    // color:"pink"
                    // 渐变色
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                symbol: "circle",  //设置拐点
                symbolSize: 8,    //设置拐点大小
                showSymbol: false,  //开始不显示拐点,鼠标经过才显示
                itemStyle: {    //设置拐点颜色
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
            },
            {
                name: 'Union Ads',
                type: 'line',
                areaStyle: {},
                smooth: true,
                areaStyle: {
                    lineStyle: {
                        normal: {
                            color: "#00d887",
                            width: 2
                        }
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                symbol: "circle",  // 设置拐点 小圆点
                symbolSize: 5,   // 拐点大小
                itemStyle: {  // 设置拐点颜色以及边框
                    color: "#00d887",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                showSymbol: false,  // 开始不显示拐点, 鼠标经过显示
 
                emphasis: {
                    focus: 'series'
                },
                data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20],
            },
        ]
    }
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})();

5. 饼图


<div class="panel pie2">
    <h2>饼形图</h2>
    <div class="chart">图标</div>
</div>


(function () {
    var myChart = echarts.init(document.querySelector(".pie2 .chart"))
    var option = {
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            // left: 'center',
            bottom: '0%',
            itemWidth:10,
            itemHeight:10,
            textStyle:{
                color:"rgba(255,255,255,.5)",
                fontSize:10
            }
        },
        series: [
            {
                name: '地区分布',
                type: 'pie',
                radius: ["10%", "70%"],
                center: ['50%', '50%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                ],
                label: {
                    fontSize: 10  //图形文字
                },
                labelLine: {   //连接文字与图像的线条
                    length: 6,  //连接图形的线条
                    length2: 8  //连接文字的线条
                }
            }
        ]
    };
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})()

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/743069