附录1-立可得智能看板(除地图外的其余部分)

最新推荐文章于 2023-06-09 14:44:39 发布

Suyuoa

最新推荐文章于 2023-06-09 14:44:39 发布

阅读量834

点赞数

分类专栏： Echarts笔记文章标签： echarts javascript

本文链接：https://blog.csdn.net/potato123232/article/details/128931441

版权

Echarts笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目地址 zhousg/zhoushugang

项目的展示效果是这样的

这个项目是放在大屏上展示用的，如果缩小到一定程度就会由于盒子空间不够导致不是很好看

我们针对其中使用到Echarts部分抽离出来，以便后面的调用

在抽离的时候我会优先使用目前(2023/2/7)最新的 5.4.0版本的echarts 与 3.6.1版本的jquery

1 点位分布统计

<!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>
        .pie {
            width: 400px;
            height: 400px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="pie"></div>
</body>
<script src="../5.4.0echarts.min.js"></script>
<script src="../jquery-3.6.1.min.js"></script>
<script>
    var option = {
        // 控制提示
        tooltip: {
            // 非轴图形，使用item的意思是放到数据对应图形上触发提示
            trigger: 'item',
            // 格式化提示内容：
            // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 控制图表
        series: [
            {
                // 图表名称
                name: '点位统计',
                // 图表类型
                type: 'pie',
                // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                // 百分比基于  图表DOM容器的半径
                radius: ['10%', '70%'],
                // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                center: ['50%', '50%'],
                // 半径模式，另外一种是 area 面积模式
                roseType: 'radius',
                // 数据集 value 数据的值 name 数据的名称
                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: 8,
                    // 连接文字线长
                    length2: 10
                }
            }
        ],
        // 每块图标颜色
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    };
    var myChart = echarts.init($('.pie')[0])
    myChart.setOption(option)
</script>

</html>

2 全国用户总量统计

<!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>
        .bar {
            width: 900px;
            height: 400px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="bar"></div>
</body>
<script src="../5.4.0echarts.min.js"></script>
<script src="../jquery-3.6.1.min.js"></script>
<script>
    (function () {
  var item = {
    name: '',
    value: 1200,
    // 柱子颜色
    itemStyle: {
      color: '#254065'
    },
    // 鼠标经过柱子颜色
    emphasis: {
      itemStyle: {
        color: '#254065'
      }
    },
    // 工具提示隐藏
    tooltip: {
      extraCssText: 'opacity:0'
    }
  }
  var option = {
    // 工具提示
    tooltip: {
      // 触发类型  经过轴触发axis  经过轴触发item
      trigger: 'item',
      // 轴触发提示才有效
      axisPointer: {
        // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果       
        type: 'shadow'
      }
    },
    // 图表边界控制
    grid: {
      // 距离 上右下左 的距离
      top: '3%',
      right: '3%',
      bottom: '3%',
      left: '0%',
      // 是否包含文本
      containLabel: true,
      // 显示边框
      show: true,
      // 边框颜色
      borderColor: 'rgba(0, 240, 255, 0.3)'
    },
    // 控制x轴
    xAxis: [
      {
        // 使用类目，必须有data属性
        type: 'category',
        // 使用 data 中的数据设为刻度文字
        data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        // 刻度设置
        axisTick: {
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          show: false
        },
        // 文字
        axisLabel: {
          color: '#4c9bfd'
        }
      }
    ],
    // 控制y轴
    yAxis: [
      {
        // 使用数据的值设为刻度文字
        type: 'value',
        // 刻度设置
        axisTick: {
          show: false
        },
        // 文字
        axisLabel: {
          color: '#4c9bfd'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)'
          }
        }
      }
    ],
    // 控制数据
    series: [
      {
        // 图表数据名称
        name: '用户统计',
        // 图表类型
        type: 'bar',
        // 柱子宽度
        barWidth: '60%',
        // 数据
        data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
        // 颜色
        itemStyle: {
          // 提供的工具函数生成渐变颜色
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00fffb' }, // 0 起始颜色
              { offset: 1, color: '#0061ce' }  // 1 结束颜色
            ]
          )
        }
      }
    ]
  };
  var myChart = echarts.init($('.bar')[0])
  myChart.setOption(option)
})();
</script>
</html>

中间的...部分不是因为太多了给省略了，而是直接就写的...，我们可以连同名称带数据一起删掉

3 销售额统计

3.1 仅图表部分

使用echats做的实际上只有下面这部分

<!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>
        .line {
            width: 500px;
            height: 300px;
            margin: 150px auto;
        }
    </style>
</head>

<body>
    <div class="line"></div>
</body>

<script src="../5.4.0echarts.min.js"></script>
<script src="../jquery-3.6.1.min.js"></script>
<script>
    // 准备数据
    var data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        // quarter: [
        //     [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        //     [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        // ],
        // month: [
        //     [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        //     [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        // ],
        // week: [
        //     [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        //     [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        // ]
    }
    var option = {
        // 工具提示
        tooltip: {
            trigger: 'axis'
        },
        // 图例组件
        legend: {
            textStyle: {
                color: '#4c9bfd',
            },
            right: '10%'
        },
        // 设置网格
        grid: {
            show: true,
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            borderColor: '#012f4a',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            axisLine: {
                show: false
            },
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a'
                }
            }
        },
        series: [{
            name: '预期销售额',
            data: data.year[0],
            type: 'line',
            smooth: true,
            itemStyle: {
                color: '#00f2f1'
            }
        }, {
            name: '实际销售额',
            data: data.year[1],
            type: 'line',
            smooth: true,
            itemStyle: {
                color: '#ed3f35'
            }
        }]
    };
    var myChart = echarts.init($('.line')[0])
    myChart.setOption(option)
</script>
</html>

3.2 简单复刻

图表切换也会经常用到，源码的CSS层级有点儿多，复刻起来比较麻烦，所以我就自己写一下

html

<!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>
    <link rel="stylesheet" href="demo.css">
</head>

<body>
    <div class="all">
        <div class="head">
            <e class="title">销售额统计</e>
            <span class="Bechecked" data-type="year">年</span>
            <span data-type="quarter">季</span>
            <span data-type="month">月</span>
            <span data-type="week">周</span>
        </div>
        <div class="content">
            <span class="unit">单位：万</span>
            <div class="line"></div>
        </div>
    </div>
</body>

<script src="../../../5.4.0echarts.min.js"></script>
<script src="../../../jquery-3.6.1.min.js"></script>
<script src="./demo.js"></script>
</html>

demo.less

body {
    background-image: url(./bg.jpg);
}

.all {
    width:500px;
    height:300px;
    margin:150px auto;
    padding: 20px;
    box-sizing: border-box;
    .head {
        width:100%;
        height:20px;
        line-height: 20px;
        e {
            padding-left:20px;
            padding-right:20px;
            border-right:2px solid rgb(0,127,127);
            color:white;
        }
        span {
            color:rgb(9,137,158);
            margin-left:20px;
            padding-left:3px;
            padding-right:3px;
            cursor: pointer;
        }
        .Bechecked {
            color:white;
            background-color: rgb(76,155,253);
        }
    }
    .content {
        width:100%;
        height:220px;
        .unit {
            position:relative;
            top:22px;
            left:60px;
            color:rgb(40,85,142)
        }
        .line {
            width:100%;
            height:100%;
        }
    }
}

demo.js

// 准备数据
var data = {
    year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
}
var option = {
    // 工具提示
    tooltip: {
        trigger: 'axis'
    },
    // 图例组件
    legend: {
        textStyle: {
            color: '#4c9bfd',
        },
        right: '10%'
    },
    // 设置网格
    grid: {
        show: true,
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        borderColor: '#012f4a',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#4c9bfd'
        },
        axisLine: {
            show: false
        },
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#4c9bfd'
        },
        splitLine: {
            lineStyle: {
                color: '#012f4a'
            }
        }
    },
    series: [{
        name: '预期销售额',
        data: data.year[0],
        type: 'line',
        smooth: true,
        itemStyle: {
            color: '#00f2f1'
        }
    }, {
        name: '实际销售额',
        data: data.year[1],
        type: 'line',
        smooth: true,
        itemStyle: {
            color: '#ed3f35'
        }
    }]
};
var myChart = echarts.init($('.all .content .line')[0])
myChart.setOption(option)

// 切换
$('.all').on('click', '.head span', function () {
    // 样式
    $(this).addClass('Bechecked').siblings().removeClass('Bechecked')
    // 数据
    var currData = data[this.dataset.type]
    option.series[0].data = currData[0]
    option.series[1].data = currData[1]
    myChart.setOption(option)
})
// tab索引
var index = 0;
// 所有tab
var allTab = $('.all .head span')
setInterval(function () {
    index++
    // 大于等于4索引切换到0索引
    if (index >= 4) index = 0
    // 选中对应tab触发点击
    allTab.eq(index).click()
}, 2000)

3.3 更改数据

改动的话也就是年季月周与图片的联系

我们再加一个日来举例

4 一季销售进度

4.1 简单复刻

<!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>
        .gauge {
            width: 400px;
            height: 400px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="gauge"></div>
</body>
<script src="../5.4.0echarts.min.js"></script>
<script src="../jquery-3.6.1.min.js"></script>
<script>
    var option = {
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['130%', '150%'],
                center: ['48%', '80%'],
                label: {
                    show: false,
                },
                startAngle: 180,
                hoverOffset: 0,
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#00c9e0' },
                                    { offset: 1, color: '#005fc1' }
                                ]
                            }
                        }
                    },
                    { value: 100, itemStyle: { color: '#12274d' } },
                    { value: 200, itemStyle: { color: 'transparent' } }
                ]
            }
        ]
    }
    var myChart = echarts.init($('.gauge')[0])
    myChart.setOption(option)
</script>

</html>

4.2 从原型到项目中的样子

4.2.1 原型

我们下面简单分析一下，我们去掉radius与center，然后给第三区域颜色，可以发现这是一个饼状图

4.2.2 radius

第一个参数是内部圆半径，第二个参数是外部圆半径

在原版中它设置的内半径与外半径都很大，超出范围的会隐藏，所以会变为只剩四个角

实际上它是这样的

4.2.3 center

第一个参数是将中点在x上移动，第二个参数是将中点在y轴移动

将radius与center一结合就变成这样了

4.3 更改数据

现在两个都是100，所以显示的是一半一半，可以对这里的value进行调整，达到想要的比例

但我们刚刚也看过原理，它并不是按照 80:120 来显示的，一般我们不会用饼图来改，而是用专门的图表来搞，比如仪表盘

Suyuoa

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
附录1-立可得智能看板(除地图外的其余部分)

项目地址项目的展示效果是这样的这个项目是放在大屏上展示用的，如果缩小到一定程度就会由于盒子空间不够导致不是很好看我们针对其中使用到Echarts部分抽离出来，以便后面的调用在抽离的时候我会优先使用目前(2023/2/7)最新的 5.4.0版本的echarts 与 3.6.1版本的jquery。
复制链接

扫一扫