Echarts学习系列之二

标签： 无 分类： 未分类 创建时间：2023-05-07 04:18:40 更新时间：2025-01-17 10:39:22

1.百分比柱形图

实现一个百分比的柱形图，如下图:

配置内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import echarts from "@/utils/echars"
import { ref, onMounted } from "vue"

const chart = ref(null) // Dom引用
const option = {
    grid: [
        {
            show: false,
            left: 50,
            top: 10,
            right: 60,
            bottom: 10
        }
    ],
    dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
        // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
        // 如果不指定 dimensions，也可以通过指定 series.encode
        // 完成映射，参见后文。
        dimensions: ["xzq", "percentage", "npercentage"],
        source: [
            { xzq: "3 拱墅", percentage: 12.93, npercentage: 87.07 },
            { xzq: "2 余杭", percentage: 15.2, npercentage: 84.8 },
            { xzq: "1 富阳", percentage: 24.78, npercentage: 75.22 }
        ]
    },
    xAxis: {
        type: "value",
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: "category",
        axisLabel: { // 坐标轴数值
            show: true,
            textStyle: {
                color: "rgba(255, 255, 255, 1)"
            },
            fontFamily: "Bebas Neue"
        },
        axisLine: { // 坐标轴
            show: false
        },
        axisTick: { // y轴刻度线
          show: false
        }
    },
    series: [
        {
            type: "bar",
            barWidth: 12,
            itemStyle: {
                color: "rgba(245, 68, 85, 1)"
            },
            stack: "x"
        },
        {
            type: "bar",
            barWidth: 12,
            itemStyle: {
                color: "rgba(70, 91, 96, 1)"
            },
            label: {
                show: true, // 开启显示
                position: "right",
                distance: 60,
                textStyle: { // 数值样式
                    color: "rgba(245, 68, 85, 1)",
                    fontSize: 16
                },
                align: "right",
                formatter: "{@percentage}%",
                fontFamily: "Bebas Neue"
            },
            stack: "x"
        }

    ]
}

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(chart.value)
    // 绘制图表
    myChart.setOption(option)
})
参考文章:
1.堆叠柱状图 stack实现堆叠
2.echarts 配置项里 normal 属性的含义是什么？ 这个配置确实被废弃了，可以生效是为了向下兼容
3.【echarts】柱状图上方显示数值
4.Echarts配置项itemStyle失效现象
5.如何使用网络字体
6.echarts图表不显示或设置字体样式不生效，可能存在的问题 这个没啥用。

2.legend富文本样式

需要做出一个丰富的图例，如下图所示

配置代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
legend: {
    orient: "vertical",
    x: "50%", // 可设定图例在左、右、居中
    y: "center", // 可设定图例在上、下、居中
    itemGap: 20,
    textStyle: {
        color: "#fff",
        fontSize: 16,
        rich: {
        name: {
            color: "rgba(255, 255, 255, 0.6)",
            fontSize: 16
        },
        value: {
            color: "rgba(0, 232, 126, 1)",
            fontFamily: "Bebas Neue",
            fontSize: 16
        },
        percentage: {
            color: "rgba(255,255,255,1)",
            fontFamily: "Bebas Neue",
            fontSize: 16
        }
        }
    },
    icon: "rect",
    itemWidth: 10,
    itemHeight: 10,
    formatter: function(name:string) {
        let legend = ``
        chartData.forEach(item => {
        const itemName = item.name
        if (itemName === name) {
            legend = ` {name|${name}}  {value|${item.value}}  {percentage|${item.percentage}}%`
        }
        })
        return legend
    }
}
参考文章:
1.legend.textStyle. rich
2.echarts legend 使用formatter和rich自定义样式
3.vue引入echarts升级5.0后，控制台提示问题 删除 textStyle这层对象，将对象里的代码提出来

3.图例文字样式

要想文字 选中的文字样式和序列一样需要添加，至于为什么这个样子，暂时不清楚。

1
2
3
4
textStyle:{
    color:function(params){
    }
}
参考文章:
【1】.echarts设置折线图图例的颜色与图例的文字颜色 从这篇文章中找到了解决方案，但是没有找到原因。echarts中设置图例文字的颜色与图例的颜色相同
【2】.echarts自定义图例（legend）样式 图例宽度固定，文字超出部分以“…”代替，鼠标悬浮在单个图例（legend）时以tooltip的方式展示全当前name。图例数量过多时可滚动翻页
【3】.echarts折线图多条线时候展示数据不对
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.百分比柱形图
  2. 2. 2.legend富文本样式
  3. 3. 3.图例文字样式
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文