echart：关于echart的标签样式、饼图上显示百分比、标识线样式、图表字体颜色等一堆小问题合集

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
title: {
        text: '天气情况统计', //标题
        subtext: '虚构数据', //副标题
        left: 'center'//标题位置
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"   //鼠标移上去显示的内容
    },
    normal: {
        show: true,
        position: 'inside',     //图形里显示（比如在饼图块上显示百分比）
        formatter: '{d}%'       //显示的内容
    },
    textStyle : {
        fontWeight : 'normal',     //显示字体粗细等
        fontSize : 10
    },
legend: {                      //图例
        // top: 'middle',
        // bottom: 10,
        // left: 'center',
        icon: "circle",        //圆点形图例（默认是官网上的圆角矩形）
        itemWidth: 10,         //这几个是图例宽高位置等的设置
        itemHeight: 10,
        itemGap: 20,
        left: 100,
        top: 110,
        bottom: 20,
        textStyle: {
            // fontSize: 5
            color:"#fff"      //图例字体颜色等
        },
        data: ['规划问题', '设计问题','优化问题','维护问题']
    },
series : [
        {
            type: 'pie',         //图表类型 这里是饼图
            radius : '35%',        //饼图大小
            center: ['50%', '50%'],   //在div中位置
            selectedMode: 'single',
            labelLine:{  
                normal:{  
                    length:4        //标识线
                }  
            },

            data:[
                {value:64,name: '规划问题'}, //数据
                {value:73, name: '设计问题'},
                {value:80, name: '优化问题'},
                {value:80, name: '维护问题'},
            ],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'inner', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 10   //文字的字体大小
                    },
                    formatter:'{d}%'   //显示%

                    
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,         //阴影设置
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
toolbox: {                                 //工具组小按钮等
                    show:true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        //magicType: {type: ['line', 'bar']},//折线图、柱状图切换
                        //restore: {},//恢复，即刷新图表
                        //saveAsImage: {}//保存为图片
                    }
                },
xAxis:  {    //设置横坐标（折线图里使用）
                    type: 'category',
                    axisLabel: {//横坐标的控制
                        show:true,//是否显示横坐标数据
                        rotate: 30,//坐标的倾斜角度
                        inside:false,//刻度是否朝内
                        margin:8,//标尺与轴线的距离，默认8
                        },
                    boundaryGap: false,
                    data: ['05.02','05.03','05.04','05.05','05.06','05.07','05.08']
                },
 graphic:{    //环形图中间显示字
            type:'text',
            left:'center',
            top:'center',
            style:{
                text:'xxxxxxx',
                textAlign:'center',
                fill:'#000',
                width:30,
                height:30
            }
        },

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
//仪表盘相关
function echart_5() {
          // 基于准备好的dom，初始化echarts
        var myChart = echarts.init(document.getElementById('chart_5'));
        var option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}"  //鼠标放上的数据显示
            },
            // toolbox: {       //小工具栏
            //     show : true,
            //     feature : {
            //         mark : {show: true},
            //         restore : {show: true},
            //         saveAsImage : {show: true}
            //     }
            // },
            series : [
                {
                    name:'指标',
                    type:'gauge',                
                    min:0,        //仪表盘最小值
                    max:1000,     //仪表盘最大值       
                    splitNumber: 10,       // 分割段数单位，默认为5
                    radius: '68%',         //表盘大小
                    center: ["50%", "60%"], // 仪表位置
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], 
                            width: 2, //仪表盘外围圆宽度
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10    //阴影效果
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        splitNumber: 5,   // 每份split细分多少段
                        length :6,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    axisLabel: {
                        show:false
                    },
                    splitLine: {           // 分隔线
                        show: true,        // 默认显示，属性show控制显示与否
                        length :2,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width:2,       //线宽
                            color: '#fff',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer : {
                        width : 2    //指针宽度大小
                    },
                    title : {
                        show : true,
                        offsetCenter: [0, '100%'],       // x, y，单位px 标题位置
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',   //标题文本设置
                            fontSize: 10,
                            color: '#fff',
                        }
                    },
                    detail : {
                        formatter:'{value}',
                        offsetCenter: [0, '30%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 14,
                            color: '#fff'
                        }
                    },
                    data:[{value: 554, name: '位置告警'}]  //name表盘标题 value初始数
                }
            ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option);
        
        // setInterval(function (){
        //     option.series[0].data[0].value = (Math.random()*20).toFixed(2) - 0;
        //     myChart.setOption(option,true);
        // },2000);
        data= [600,580,620,670,550,560,600,670,700,750,610,670,723,590,780,770,790,820,870,890,920,990];//自己的数据
        index=0;
            setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
                option.series[0].data[0].value = data[index++%data.length];
                myChart.setOption(option, true);
            }, 2000);
           
    }

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
function echart_22() {
           // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById('chart_22'));
            option = {
                title: {
                    text: '现状',top:'10%',left:'center', //标题相关
                    textStyle:{
                    color:'#fff',        //颜色
                    fontStyle:'normal',     //风格
                    fontWeight:'normal',    //粗细
                    // fontFamily:'Microsoft yahei',   //字体
                    fontSize:14,     //大小

                    textAlign:'center'   //水平对齐
                },

                      
                },
            color:['#218BB4','#5AA949','#C23531','#7121B4'],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                itemWidth: 8,  // 设置宽度
                itemHeight: 8, // 设置高度
                textStyle:{
                            color:"#fff",
                            fontSize: 10
                        },
                  orient: 'vertical',
                  left: 'center',  //图例距离左的距离 center为居中 可设置数字 例'9'
                  top:'24%',       //图例距离上的距离
                data:['干线放大器','模拟直放站','','无线直放站','数字直放站'],//图例换行'',

            },


            grid: {
                left: '-20%',//生成的图片和左边的间距
                // right: '2%',//生成的图片和右边的间距’,
                // bottom: '10%',//生成的图片和底部的间距
                top: '20%',//生成的图片和顶部的间距
                containLabel: true//为ture才会生效以上的设置
            },

            series: [
                {
                    name:'count',
                    type:'pie',
                    radius: ['30%', '55%'],   //大小圆环大小
                    center: ['50%', '70%'],   //在div中位置
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            formatter: '{d}%',     //显示的内容
                            position: 'inner',     //显示的位置在扇形上 center为圆环中间
                            textStyle: {
                                fontSize: '10',
                                color:'#fff'
                            }
                        },

                        // emphasis: {
                        //     show: true,
                        //     textStyle: {
                        //         fontSize: '12',
                        //         fontWeight: 'bold'
                        //     }
                        // }
                    },
                    labelLine: {
                        normal: {
                            show: false         //连接线提示
                        }
                    },
                    data:[                            //数据
                        {value:10, name:'干线放大器'},
                        {value:5, name:'无线直放站'},
                        {value:15, name:'模拟直放站'},
                        {value:70, name:'数字直放站'}
                    ]
                }
            ]
        };
           // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

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
function echart_1() {
       
        var myChart = echarts.init(document.getElementById('chart_1'));
        
         var option = {
            // title: {
            //     text: 'ECharts 入门示例'
            // },
            //颜色，设置完自动柱子颜色就对应了
            color:['#ef5f2b','#4a6ac4','#77cd63','#a325c0','#369ebc','#e2a83f'],
            tooltip: {},
            legend: {
                data:['GSM','WCDMA','LTE','WLAN','NB-LOT','LORA'],
                textStyle:{
                    color:"#fff",
                    fontSize: 10
                },
                icon: "circle",   //  图例   这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
                itemWidth: 8,  // 图例设置宽度
                itemHeight: 8, // 图例设置高度
                itemGap: 10,// 图例设置间距
                padding: [40, 10, 15, 20]    // 图例padding[5, 10, 15, 20]

            },
            dataset: {
                source: [
                    ['x','需整改','需增补','需新建','需扩容'],
                    ['GSM', 10, 0, 0, 0, 0, 0],
                    ['WCDMA', 20, 0, 0, 0, 0, 0],
                    ['LTE', 125, 124, 226, 38, 45, 29],
                    ['WLAN', 38, 36, 148, 13, 25, 10],
                    ['NB-LOT', 25, 43, 38, 30],
                    ['LORA', 28, 31, 26, 12]
                ]
            },
            xAxis: [
                {
                    // data: ['需整改','需增补','需新建','需扩容'],
                    type: 'category', gridIndex: 0,
                    //设置坐标轴字体颜色和宽度
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    },
                    axisLabel: {   //x轴文字样式
                            textStyle: {
                                fontSize: 13
                            }
                    },
                }

            ],
            yAxis: [
                {
                    gridIndex: 0,
                 //设置坐标轴字体颜色和宽度
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    },
                    axisLabel: {   //x轴文字样式
                            textStyle: {
                                fontSize: 10
                            }
                    },
                }
            ],
            grid: [    //位置
                {top: '22%',
                bottom: '20%',
                // left: '10%',
                // right:'5%'
            },
            ],
            series: [
                // barWidth柱子宽度 barGap柱子间距
                {type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
                {type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
                {type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
                {type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
                {type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
                {type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
                // 
            ]
               
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // window.addEventListener("resize", function () {
        //     myChart.resize();
        // })
    }