Echarts

发表于 | 分类于 ，
字数统计: 432 | 阅读时长 ≈ 2

[toc]

获取echarts.min.js

官网下载

选择”在线定制”

修改图例、x轴或y轴文本字体颜色改变

修改legend（图例）字体颜色：

1
2
3
4
5
6
7
8
 legend: {
    y:'55%',
    textStyle:{
        fontSize: 18,//字体大小
        color: '#ffffff'//字体颜色
    },
    data: []
}

修改x轴字体颜色：

1
2
3
4
5
6
7
8
9
10
11
12
xAxis : [
    {
        type : 'category',
        data : [],
        axisLabel: {
            show: true,
            textStyle: {
                color: '#ffffff'
            }
        }
    }
]

修改y轴字体颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
yAxis : [
    {
        type : 'value',
        nameTextStyle: {
            color: '#ffffff'
        }, // name的颜色值在这里改
        name : '',
        axisLabel : {
            textStyle: {
                color: '#ffffff'
            }
        }
    }
]

在一个页面同时显示多个不同形状的图表

  1. 采用两个id不同的div
  2. 设置series数组
    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
    option = {//简单的 折线图+饼图 展示
        grid: [
            {x: '7%', y: '7%', width: '38%', height: '38%'},//折线图位置控制
        ],
        xAxis: [
            {gridIndex: 0,type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']},
        ],
        yAxis: [
            {gridIndex: 0 },
        ],
        series: [
            {
                type: 'line',//折线图
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: [1,2,3,4,5],
            },
            {
                type: 'pie',
                radius : '45%',
                center: ['80%', '30%'],//饼图位置控制
                data: [1,2,3,4,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
option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [{
        name: '库存情况',
        type: 'pie',
        radius: '68%',
        center: ['50%', '50%'],
        clockwise: false,
        data: [{
            value: 45,
            name: 'CARD'
        }, {
            value: 25,
            name: 'SSD'
        }, {
            value: 15,
            name: 'U盘'
        }, {
            value: 8,
            name: '嵌入式'
        }, {
            value: 7,
            name: 'FLASH'
        }],
        label: {
            normal: {
                textStyle: {
                    color: '#999',
                    fontSize: 14,
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        itemStyle: { // 在此配置边框
            normal: {
                borderWidth: 4,
                borderColor: '#ffffff',
            },
            emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }],
    color: [
        '#00acee',
        '#52cdd5',
        '#79d9f1',
        '#a7e7ff',
        '#c8efff'
    ],
    backgroundColor: '#fff'
};
0%