2019-04-16-echart3使用技巧

背景

近期开发工作中涉及到大量的图表展示功能，主要使用 echart3 绘图应用于大屏展示中，总的来说 echart3 还是比较容易上手的，本文整理几个实用用法，如饼图三环，线形图，柱状图渐变色，作为网上笔记，以备后用。

饼图三环效果

效果图：

实现难点：

  1. 标题居中； 2.三环效果

  2. 标题居中比较简单，为了达到文字放于饼图中心效果，我们将 title 调整显示位置来达到目的。title: {x: ‘center’, y: ‘37%’…}

1
2
3
4
5
6
7
8
9
10
11
title: {
    text: '性别分布',
    // subtext: '纯属虚构',
    x: 'center', // 标题X轴位置
    y: '37%',    // 标题Y轴位置
    textStyle: {
      fontWeight: 'normal',              //标题颜色
      color: '#FFFFFF',
      fontSize: echartConfig.fontSize
    }
  }
  1. 三环效果，echart3 本身支持内外两环设置，如下:
1
2
3
4
5
 series: [{
          name: '性别分布',
          type: 'pie',
          radius: ['50%','60%'],    // 设置内环/外环大小
          center: ['50%', '42%'],

…
第三环由 UI 出图仅做展示用途。利用 position: absolute;     z-index: 10; 巧妙堆叠至 echart 报表之下，注意 z-index 一定要低于图表。

1
2
3
4
5
6
7
8
9
10
11
<div class="pie-echart-mask"></div>
.pie-echart-mask {
    position: absolute;
    left: 135px;
    top: 33px;
    z-index: 1001;
    width: 115px;
    height: 115px;
    background: url(../img/big/pie-bg-9c88e322cf.png);
    background-size: 115px 115px;
}

坐标轴图表问题总结

1.柱状图/线形图 x/y 轴数据未显示完全，通过设宽宽度，缩放图例

1
2
3
4
5
6
7
8
#div_chajian_yuanzhu {
    height: 120px;
    width: 480px;
    position: absolute;
    left: -63px;
    bottom: 15px;
    -webkit-transform: scale(.7,1);
}

2.删除网格

1
2
3
4
 xAxis: [
                {
                    splitLine: {show: false},//去除网格线
...

3.轴线文字竖排

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 xAxis: [
                {
                    splitLine: {show: false},//去除网格线
                    axisLabel: { //调整x轴的lable
                        interval: 0,   //X轴信息全部显示;
                        textStyle: {
                            fontSize: 12,
                            color: '#fff',
                        },
                        formatter: function (value) {
                            //x轴的文字改为竖版显示
                            var str = value.split("");
                            return str.join("\n");
                            // return '{a|' + value + '}';
                        }
                    },
...

4.网格内容位置调整，（实际图表内容）

1
2
3
4
5
6
7
grid: {
    left: '1%',
    right: '1%',
    top: '10%',
    bottom: '14%',
    containLabel: true
},

5.渐变色

1
2
3
4
5
6
7
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
           offset: 0,
           color: '#0E92A1'
       }, {
           offset: 1,
           color: '#0A5B94'
       }])

附：完整饼图示例

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
var demoOption = {
            title: {
                text: 'demo',
                // subtext: '纯属虚构',
                x: 'center',
                y: '44%',
                textStyle: {
                    fontWeight: 'normal',              //标题颜色
                    color: '#FFFFFF',
                    fontSize: 14
                }
            },
            series: [
                {
                    name: '消费用途',
                    type: 'pie',
                    radius: ['39%', '47%'],
                    center: ['50%', '50%'],
                    // label: {
                    //     normal: {
                    //         //					formatter: '{b}:{c}: ({d}%)',
                    //         textStyle: {
                    //             fontWeight: 'normal',
                    //             fontSize: 10,
                    //             color: echartConfig.commonEchartColor
                    //         }
                    //     }
                    // },
                    labelLine: {
                        normal: {
                            length: 25
                        }
                    },
                    data: [{value: "80%", name: "男"}, {value: "20%", name: "女"}],    // 实际饼图
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    color: ['#5E86EB', '#3764D1', '#1740AB', '#3462D8', '#2759D5', '#1945B4', '#3655CE', '#183FA9', '#1D46AC', '#224396']
                }
            ],
        };

附 2：柱状图

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
94
95
var zhuzhuangDemo= {
            title: {
                text: '柱状图demo',
                // subtext: '纯属虚构',
                x: 'right',
                y: 'bottom',
                textStyle: {
                    fontWeight: 'normal',              //标题颜色
                    color: "#fff",
                    fontSize: 10
                }
            },
            tooltip: {
                formatter: function (params, vals) {
                    var val = params[0].name + ' : \n' + params[0].data * 1000000
                    return val
                },
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '1%',
                right: '1%',
                top: '10%',
                bottom: '14%',
                containLabel: true
            },
            xAxis: [
                {
                    splitLine: {show: false},//去除网格线
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0)'
                        }
                    },
                    label: {
                        position: 'insideRight'
                    },
                    type: 'category',
                    axisLabel: { //调整x轴的lable
                        interval: 0,   //X轴信息全部显示;
                        textStyle: {
                            fontSize: 12,
                            color: "#fff"
                        },
                        formatter: function (value) {
                            //x轴的文字改为竖版显示
                            var str = value.split("");
                            return str.join("\n");
                            // return '{a|' + value + '}';
                        }
                    },
                    data: num1,
                    axisTick: {
                        alignWithLabel: false
                    }
                }
            ],
            yAxis: [
                {
                    splitLine: {show: false},//去除网格线
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0)'
                        }
                    },
                    type: 'value',
                    axisLabel: { //调整x轴的lable
                        formatter: '{value} 百万',
                        // rotate: -45,     //文字逆时针旋转45°
                        textStyle: {
                            fontSize: 10,
                            color: "#fff"
                        }
                    },
                }
            ],
            series: [
                {
                    name: '分布',
                    type: 'bar',
                    barWidth: '50%',
                    data: [{name: '北京', value: '232144789'},{name: '上海', value: '789124823'},{name: '南京', value: '123478789123'}],
                    itemStyle: {
                        normal: {
                            fontSize: 8,
                            //颜色渐变
                            color: '#215ADD'
                        }
                    }
                }
            ]
        };
vue
#echart3 #饼图 #柱状图
2019-04-16-echart3使用技巧
https://zhangyingxuan.github.io/2019-04-16-echart3使用技巧/
作者
blowsysun
更新于
2026年1月23日
许可协议