Echarts 难点攻克

十二月 13, 2024 3951

汇聚各个时间段，关于 Echarts 的一些难点问题，他们掌握之后又很容易忘记，全部汇总在这里

饼图使用 dataset 方式绑定数据

dataset习惯用json对象的集合：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dataset:{
  source:[
    {key1:'直达',key2:335,key3:0},
    {key1:'营销广告',key2:679,key3:0},
    {key1:'搜索引擎',key2:1548,key3:0},
    {key1:'直达',key2:0,key3:335},
    {key1:'邮件营销',key2:0,key3:310},
    {key1:'联盟广告',key2:0,key3:234},
    {key1:'视频广告',key2:0,key3:135},
    {key1:'百度',key2:0,key3:1048},
    {key1:'谷歌',key2:0,key3:251},
    {key1:'必应',key2:0,key3:147},
    {key1:'其他',key2:0,key3:102}
  ]
},

饼图系列相关配置：

1
2
3
4
5
6
{
  "encode": {
    "itemName": "key1",
    "value": "key2"
  }
}

完整代码：

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
{
    "tooltip": {
        "trigger": "item",
        "formatter": "{a} <br/>{b} : {c} ({d}%)"
    },
    "legend": {
        "orient": "vertical",
        "x": "left"
    },
    "dataset": {
        "source": [{
            "key1": "直达",
            "key2": 335,
            "key3": 0
        }, {
            "key1": "营销广告",
            "key2": 679,
            "key3": 0
        }, {
            "key1": "搜索引擎",
            "key2": 1548,
            "key3": 0
        }, {
            "key1": "直达",
            "key2": 0,
            "key3": 335
        }, {
            "key1": "邮件营销",
            "key2": 0,
            "key3": 310
        }, {
            "key1": "联盟广告",
            "key2": 0,
            "key3": 234
        }, {
            "key1": "视频广告",
            "key2": 0,
            "key3": 135
        }, {
            "key1": "百度",
            "key2": 0,
            "key3": 1048
        }, {
            "key1": "谷歌",
            "key2": 0,
            "key3": 251
        }, {
            "key1": "必应",
            "key2": 0,
            "key3": 147
        }, {
            "key1": "其他",
            "key2": 0,
            "key3": 102
        }]
    },
    "series": [{
        "name": "访问来源",
        "type": "pie",
        "selectedMode": "single",
        "radius": [0, 70],
        "itemStyle": {
            "normal": {
                "label": {
                    "position": "inside"
                },
                "labelLine": {
                    "show": false
                }
            }
        },
        "minShowLabelAngle": 1,
        "encode": {
            "itemName": "key1",
            "value": "key2"
        }
    }, {
        "name": "访问来源",
        "type": "pie",
        "radius": [100, 140],
        "minShowLabelAngle": 1,
        "encode": {
            "itemName": "key1",
            "value": "key3"
        }
    }]
}