基本的配置就不说了,整理了以下几个常见问题
美化前:
美化后:
xAxis: { type: "category", data: ["日新增会员数", "日新增会员同比", "日新增会员环比"], axisTick: {show: false}, // 隐藏刻度 axisLine: {show: false} // 单独隐藏坐标线 }, yAxis: { axisTick: {show: false}, // 隐藏刻度 axisLine: {show: false} // 单独隐藏坐标线 },
状况:
xAxis.axisLabel.interval : 坐标轴刻度标签的显示间隔,在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为
1
,表示『隔一个标签显示一个标签』,如果值为2
,表示隔两个标签显示一个标签,以此类推。直通车
xAxis: { type: "category", data: ["日新增会员数", "日新增会员同比", "日新增会员环比"], axisLabel: { // 如果显示字符过长 就间隔1 设为0 interval:0 } },
实现效果:
series: [{ type: 'bar', barWidth : 36, data: [2000, 1800, 3000], itemStyle: { normal: { color: function(params) { let colorList = [ // 每根颜色顺序 "#7F7F7F", "#FFC000", "#558ED5" ]; return colorList[params.dataIndex]; } } } }]
写入多个 yAxis为一个数组
yAxis: [{ axisLine: { // 单独隐藏坐标线 show: false }, splitLine : { // y轴横向条设置 分裂线 lineStyle: { color: '#e7eaec' } } }, { axisLine: { // 单独隐藏坐标线 show: false }, axisLabel: { formatter: function (value, index) { // 为坐标轴添加百分比 return value.toFixed(2) + '%'; } }, splitLine : { // y轴横向条设置 分裂线 show: false }, }] series: [{ name: '所有人数', type: 'bar', barWidth : 36, barGap : 0, // 与下一条柱状没距离 data: [58762, 92012, 95737] },{ name: '重构率', type: 'line', data: [16.05,23,26], yAxisIndex: 1 // 用哪个Y轴 }]
legend样式优化
初始化样式
legend: { x: 'center', // 居中, bottom: 10, // 距离底部 itemHeight: 4, // 前边的颜色块 itemGap: 50, // 每个标题之间距离 textStyle: {padding: [0,0,0,10]}, // 文字距离颜色快距离 data [{name: '所有人数'}, {name: '>=2单人数'}, {name: '重构率', icon: 'roundRect'}] // 折线图默认为折线图标 改为柱状图标 }
就不贴代码了, 一个属性 在series中对象下的stack='xxx' 想让那几条数据堆叠就设置相同的stack
盘它
series: [{ name: '微信关注量', type: 'bar', braGap: '-100%', // 与下一条贴合在一块 data: [2000] }, { name: 'App下载量', type: 'bar', data: ['', 2000] // 第一个位置占位空 }, { name: 'App下载量', type: 'bar', data: ['', 2000] // 第一个位置占位空 }]
暂时就遇到这些问题 如果有问题可以下方评论呦~