A-Zero

# 基本设置

ECharts图表集 (opens new window)

# 常用设置

xAxis: {
  type: 'category',
  data:  dataKeys,
  name: "公司名",
  interval:5, // 步长
  min:10, // 起始
  max:50 // 终止
  axisLabel: {           
    interval: 0, //强制显示所有标签   
    rotate: 30  //X轴标签旋转（顺时针计算）
   },
}, 
yAxis : [{
	type : 'value',
	scale : true,
	min:0, // 起始
	max:5, // 终止
	interval:1, // 步长
	splitNumber : 5, //y轴值间隔数量
	axisLine: {
		show: false,
		lineStyle: {
		    type: 'solid',
		    color: '#5A5A5A',//左边线的颜色
		    width: '1'//坐标线的宽度
		}
	},
	axisLabel: {
		textStyle: {
		  color: '#5A5A5A',//坐标值得具体的颜色

		}
	},
	axisTick:false,
	splitLine: {  //坐标轴在grid区域中的分隔线（网格中的横线）
		show: true,
		lineStyle: {
		  color: ['#5A5A5A'],
		  width: 1,
		  type: 'dashed',
		}
	},
	splitArea: {//坐标轴在grid区域中的分隔区域（间隔显示网格区域）
		interval: 1, //显示间隔的规律
		show: true,
			areaStyle: {//分隔区域的样式
			  color: ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0)']
			}
	}
}],

# 如何使标题title居中



 




title: [
	{
		left: 'center', // title 组件离容器左侧的距离
		text: '测试'
	}
]

# formatter的使用

  • formatter 中 {a,b,c,d} 的含义及用法
# 折线（区域）图、柱状（条形）图
# a（系列名称），b（类目值），c（数值）, d（无） 
 
# 散点图（气泡）图
# a（系列名称），b（数据名称），c（数值数组）, d（无） 
 
# 饼图、雷达图
# a（系列名称），b（数据项名称），c（数值）, d（百分比） 
 
# 弦图
# a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)
  • formatter 结合 rich 的使用
label: {
	formatter: '{a|{a}}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
	backgroundColor: '#F6F8FC',
	borderColor: '#8C8D8E',
	borderWidth: 1,
	borderRadius: 4,
    rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
    }
},
  • formatter 实现 legend 排列对齐












 









legend: {
  icon: "rect",
  width: "80%",
  itemWidth: 6,
  itemHeight: 6,
  bottom: 0,
  textStyle: {
    color: "#333",
    rich: {
      a: {
        width: 100,
        height: 12,
        backgroundColor: "transparent", // 一定要设置，不然不生效
        padding: [0, 20, 0, 0],
      },
    },
  },
  formatter: (params) => {
    return `{a|${params}}`;
  },
}
  • formatter 方法的使用
series: [
	{
		type: "pie",
		radius: ["45%", "70%"],
		  label: {
			show: true,
			fontSize: "14",
			position:'inner',
			formatter:(data) =>{
				console.log(data) // $vars:['seriesName', 'name', 'value', 'percent']
			    return ((data.percent)).toFixed(1) + '%'
			}
		  },
		data: [],
	},
],

# 修改字体

# 目前只支持这几种字体
 fontFamily： 'serif' , 'monospace', 'Arial', 'Courier New'

← Krpano →