Echarts使用心得

发表于 | 分类于

使用背景

公司要求做一个资产详情展示，原项目使用了Echarts插件为了方便就直接使用该插件。之前没有使用过但看了示例顿时觉得效果还挺不错，此处使用环形图（Doughnut）开始了翻阅文档之旅…
Doughnut

遇到问题

  1. 图例换行
    当展示信息分为两类或多类而不能在一行或一排展示时，Echarts图例不支持自动换行，采用手动在data中加入空字符串（‘’）或换行符（‘\n’）解决
    data: ['a','b','','c']。

  2. 图例位置摆放
    基于上面的图例换行的样式想要将图例分成两份摆放在环形图左右，这样看起来层次更加鲜明。但依赖插件本身是做不到的，这时候可以将默认图例隐藏自己手写图例代替。
    pic1

  3. 图形颜色设置
    老大的审美真难测，他居然不喜欢默认的红黑配😢😢 幸好每一块图例的颜色是可以自定义的，只需将color参数作为数组传入
    color:[‘#48cda6’,’#fd87ab’,’#11abff’,’#ffdf33’,’#968ade’]，你就可以获得自定义的彩虹色了😂。

  4. 图形位置摆放
    图形默认是水平垂直居中显示，但项目中往往不只是单一的图形，所以我们需要手动设置摆放位置。series中的center: [‘50%’, ‘30%’]; 可设置水平和垂直位置。

  5. 未解决问题
    环形图居中位置背景设置，默认整个绘图背景为透明，想要只设置图像背景至今未做到

代码展示

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
var myChart = echarts.init(document.getElementById('total-money'));
var data = [
    {value:user_data.money, name:'账户余额'},
    {value:user_data.lock_money, name:'冻结金额'},
    {value:user_data.principal, name:'待收本金'},
    {value:user_data.interest, name:'待收利息'},
    {value:7000.00, name:'加入本金'},
    {value:200, name:'待收利息'}
];
var option = {
tooltip: {
    trigger: 'item',
    textStyle: {
        fontSize: '13'
    },
    formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
    show:false,
    x: 'center',
    itemWidth:8,
    itemHeight:8,
    data:['账户余额','冻结金额','待收本金','待收利息','加入本金','待收利息']
},
"color": [
    "#dd6b66",
    "#508aec",
    "#e69d87",
    "#8dc1a9",
    "#ea7e53",
    "#eedd78",
    "#73a373",
    "#73b9bc",
    "#7289ab",
    "#91ca8c",
    "#f49f42"
],
series: [
    {
        name:'占比资金',
        type:'pie',
        radius: ['50%', '70%'],
        center: ['49%','60%'],
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false,
                formatter: '{b}\n{c}'
            },
            emphasis: {
                show: false,
                textStyle: {
                    fontSize: '15'
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data:data
    }
]
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);