近阶段项目中在做大屏端系统，要使用各种各样的Echarts，现在对之前使用的图表进行总结，以备后续学习

柱状图

title: {
     text: 'name',
     backgroundColor: '#ABABAB' //标题的背景颜色
        },
tooltip: {
	  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
           type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
       }, 
 xAxis: {
            name: '单位',
            type: 'value',
            //设置坐标轴字体颜色和宽度
            axisLine: {  //这是x轴文字颜色
                lineStyle: {
                    color: "#fff"
                }
            },
            //去掉网格线
            splitLine: {
                show: false
            }
        }              
yAxis: {
       name: '人数',
      type: 'value',
      axisLine: {  //这是y轴文字颜色
      lineStyle: {
          color: "#fff"
                 }
     },
     //去掉网格线
     splitLine: {
           show: false
    }
}

饼图

//图例颜色 有几个图例就在color里面写几个颜色值。
  color:['#4472C5','#ED7C30','#80FF80',..],

legend: {
			 icon: 'none', //不要图例
            orient: 'vertical',
            x: '180', //距离
            padding: [40, 0, 0, 0], //距离上方距离），（距离右方距离）、（距离下方距离）、（距离左方距离）
            //图例字体
            textStyle: {
                fontStyle: 'bold', fontFamily: 'Microsoft YaHei', fontSize: 10, color: '#FFFFE0'
            }
        },
//饼图 位置
 grid: {
            top: '20%',
            left: '1%',
            right: '6%',
            bottom: '2%',
            containLabel: true
            },
series:{
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],//这个属性调整图像的大小和内占比
                center: ["30%", "58%"],//这个属性调整图像的位置
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                //字体样式
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data:data       
 }

---

补充:后期因项目需要，饼图图例较多，影响展示效果，echarts图标全部加上分页属性：

legend: {
		//开启分页
       type: 'scroll',
       
       orient: 'vertical',
       //图例位置
       x: 'right',//距离
      padding: [10, 10, 0, 0],//距离上方距离），（距离右方距离）、（距离下方距离）、（距离左方距离）
      //需要展示的数据
      data:data,
      //字体样式
      textStyle: {
       		fontStyle: 'bold', fontFamily: 'Microsoft YaHei', fontSize: 15, color: '#FFFFE0'
   	},
     //分页图标颜色
      pageIconColor:'#FFFFE0',
     //图标字体样式
     pageTextStyle:{
         color:'#fec107',
         fontStyle:'normal',
         fontFamily:'Microsoft YaHei'
     }
},

当然还可以自定义图标的样式和颜色， 具体可以参考：echarts API
https://echarts.apache.org/zh/option.html#legend.type，搜索 scroll 关键字