前端echarts在项目中使用技巧总结

仅为个人记录所用，仅供参考

---

条形图

1、红框内的设置

legend: {
      textStyle:{
         fontSize:15,
         color:'#fff',
         padding:[0,60,0,0],
       },
 },

2、设置图表的前后左边的边距

grid:{
    top: '12%',
    left: '5%',
    right: '0%',
    bottom: '20%',
},

3、设置横坐标字段名的颜色

xAxis: {
  type: 'category',
  axisLabel: {        
  show: true,
      textStyle: {
          color: '#fff',
          fontSize:'12'
      }
    },
 },

4、改变轴线颜色

yAxis: {
     splitLine: {
        show: true, 
        //  改变轴线颜色
        lineStyle: {
          // 使用深浅的间隔色
           color: ['#02587A']
         }, 
                      
       },
        axisLabel : {
          textStyle: {
             color: '#fff'
           }
         },
},

4、改变间距

series: [
   {type: 'bar',
   barCategoryGap:'55%',
   color:'#E76B07'
    },
   {type: 'bar',
    barCategoryGap:'55%',
    color:'#AE5FBA'
    },
     {type: 'bar',
      barCategoryGap:'55%',
      color:'#89BCFA'
        },
                
]

饼状图

1、

legend: {
                orient: 'vertical',
                textStyle:{
                    fontSize:12,
                    color:'#fff',
                },
                right:40,//设置标签的右侧距离
                bottom:45,//设置标签的底端距离
                data: ['真实火警', '火警误报', '报警测试', '异常巡检', '异常测试', '待复核']
            },
color : [ '#F54F4D', '#FF9A0C', '#CAC9C9', '#15B8C9', '#F16ED8', '#4376C5' ],

2、控制饼状图的大小

series: [
                {
                    name: '智能烟感',
                    type: 'pie',
                    radius: ['50%', '68%'],
                    center:['35%', '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 54, name: '真实火警'},
                        {value: 25, name: '火警误报'},
                        {value: 30, name: '报警测试'},
                        {value: 78, name: '异常巡检'},
                        {value: 85, name: '异常测试'},
                        {value: 120, name: '待复核'}
                    ]
                }
            ]