为什么我的echarts字体样式这么丑？Echarts 柱状图、饼图 等标签、字体、样式调整

   

在项目组做了两个月的echarts，曾经小白的我现在对echarts的使用也算是得心应手，现将个人这段时间的个人笔记奉上，供大家品鉴、参考！

1、option下调图形颜色，加： color: ['#ffd285','#ec4863', '#ff733f','#3AA6FF']


2、调节echarts背景色，在option下加：backgroundColor: "#404A59",




3、标题样式调节：
           
  title: [{
       
                    text: '会议室饱和度',
   
                    left: '40%',
   
                    top: '6%',
     
                  textStyle: {
       
                    color: '#ffd285'
   
                    }
    
                 }]


4、调节echarts图形位置，在legend下加：
            
         grid: {
                left: '10%',
                right: '5%',
                top: '16%',
                bottom: '6%',
                containLabel: true
            }




5、调节legend 标签的样式：


legend: {
                x: '40%',
                bottom: '90%',
                textStyle: {
                    color: '#ffd285',
                },
                data: ['已办件数', '逾期数'],
                textStyle: {
                    fontSize: 28 ,
                    color: '#3398DB'
                }
            }


6、调节X轴样式：


         xAxis: {
                type: 'category',
                "axisLine": {
                    lineStyle: {
                        color: '#c0576d'
                    }
                },
                "axisTick": {
                    "show": false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffd285'
                    }
                },
                boundaryGap: true, //false时X轴从0开始
                data: data_x,
                axisLabel: {
                    show: true,
                    // rotate:-10,
                    interval:0,
                    textStyle: {
                        color: '#fff',
                        fontWeight:'bold',
                        fontSize:26
                    }
                }
            }




7、调节Y轴样式《一》：
            yAxis: {
                "axisLine": {  //调节Y轴样式、颜色
                    lineStyle: {
                        color: '#c0576d'
                    }
                },
                splitLine: {   //调节网格线样式、颜色
                    show: true,
                    lineStyle: {
                        color: '#c0576d'
                    }
                },
                "axisTick": {
                    "show": false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffd285'
                    }
                },
                type: 'value'


            }




    调节Y轴样式《二》：
              {
type: 'value',
name: '统计',
min: 0,
max: 250,
interval: 50,  //调节Y轴刻度
axisLabel: {
  formatter: '{value} ml'  //刻度单位
}
      }




8、调节柱状图样式：


            {
                name: '已办件数',
                smooth: true,
                type: 'bar',
                barWidth : 40,
                symbolSize: 8,
                // symbol: 'circle',
                data: zbsl
            }


 


9、echarts工具箱：
 
          toolbox: {
                 feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
}


10、饼图样式：
     series : [
                       {


                           type: 'pie',
                           radius : '80%',
                           center: ['40%', '50%'],
                           textStyle: {
                               fontSize: '30',
                               fontWeight: 'bold'
                           },
                           data:pie_data,
                           label: {
                               normal: {
                                   textStyle: {
                                       fontSize: 25
                                   }
                               }
                           },
                           itemStyle: {
                               emphasis: {
                                   shadowBlur: 10,
                                   shadowOffsetX: 0,
                                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                               }
                           }
                       }
                   ]




11、tooltip 格式拼法：（鼠标放在图例上面显示的样式） （饼图中间）


        《一》:   tooltip : {
                    trigger: 'item',
                    formatter: "{a}
{b} : {c} ({d}%)"
                  }


《二》:
                    tooltip: {
                        trigger: 'item',
                        // formatter: "{a}
{b} : {c} ({d}%)",
                        formatter: "{b} : {c} ({d}%)",
                        textStyle:{
                            fontSize:30
                        }
                    }




12、 图例边缘的结构字体样式，展示结构，饼图为例： （饼图边缘）


                    series: [{
                      //  name: chartdata[0].name,
                        type: 'pie',
                        label: {
                            normal: {
                                formatter: function(params) {
                                    return params.percent + "%\n\n" + params.name;//饼图边缘显示的格式
                                },
                                textStyle:{
                                    fontSize:30   //饼图边缘显示的字体大小
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                length: 40,
                                length2: 30,
                                lineStyle: {
                                    color: '#ccc'
                                }
                            }
                        },
//                        data: chartdata[0].data
                        data:data1
                    }],






13、