echarts柱状图和坐标轴配置近期⼀直在使⽤ echarts ，对⾥⾯的常⽤配置做⼀个记录
通常的 react 项⽬中引⽤
import echarts from'echarts';
var myChart = null;
myChart = echarts.ElementById('id'));
另外⼀个项⽬中普通引⽤报错（ice微应⽤），换了⼀种引⽤⽅式解决了：
import * as echarts from'echarts';
let myChart: any = null;
const dom = ElementById('id') as HTMLDivElement;
myChart = echarts.init(dom);
配置
let xData = ['09/21', '09/22', '09/23', '09/24', '09/25'],
data = [88, 45, 67, 12, 85];
// if (list.length) {
//  list.forEach((m) => {
//    xData.push(place('-', '/'));
//    data.push(parseFloat(m.ratio));
//  });
// }
let option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }, // 默认为直线，可选为：'line' | 'shadow'
formatter: '{b}{a}：{c}%', // 格式化⽂档
},
grid: {
// 直⾓坐标系内绘图⽹格, 可以理解为拉伸定位
top: '30px',
bottom: '20px',
left: '20px',
right: '20px',
containLabel: true, // grid 区域是否包含坐标轴
},
xAxis: {
type: 'category',
data: xData, // 间隔名字
axisLine: { show: false }, // 轴线
axisTick: { show: false }, // 刻度
splitLine: { show: false }, // 分隔线
axisLabel: { color: '#666666' },
},
yAxis: {
// name: '单位', // 坐标轴名称
type: 'value',
min: 0, // y轴最⼩值
max: 100, // y轴最⼤值
axisLabel: {
formatter: '{value}%', // y轴1%-100%格式化
color: '#666666',
},
axisLine: { show: true, lineStyle: { color: '#eeeeee' } }, // 轴线
splitLine: { show: true, lineStyle: { color: '#eeeeee' } }, // 分隔线
// nameTextStyle: { color: '#777777' }, // 名字样式
axisTick: { show: false }, // 刻度
},
series: [
{
name: '开⼯率',
type: 'bar',
setoption
barWidth: '32%', // 柱⼦宽度
label: {
show: false, // 数据是否在柱⼦上展⽰
position: 'top',
      　fontSize: 10,
      　formatter: function(val) {  // 格式化⽂档
  return val
　},
},
color: aphic.LinearGradient(0, 0, 0, 1, [            { offset: 1, color: '#00C15E' },
{ offset: 0.5, color: '#187BDB' },
{ offset: 0, color: '#3C9CF9' },
]), // 渐变⾊柱⼦
data: data, // 数据
},
],
};
myChart.setOption(option);
展⽰效果
containLabel 设为false
图解
如果其中有柱⼦颜⾊不⼀样(图例中前三个颜⾊不⼀样)，数据格式应为    let data = [],
xData = [];
list.forEach((m, i) => {
xData.push(m.t);
if (i < 3) {
data.push({
value: m.weekPoliceCount,
itemStyle: {
color: i === 0 ? '#0078FF' : i === 1 ? '#00feff' : '#00ff38',
},
});
} else {
data.push(m.weekPoliceCount);
}
});
/
/ 处理结果为数据随意填的, 看格式就好
data =[
{ value: 85, itemStyle: { color: '#0078FF' } },
{ value: 80, itemStyle: { color: '#0078FF' } },
{ value: 77, itemStyle: { color: '#0078FF' } },
66,
55,
44,
]
效果图
添加象形图配置
series: {
type: 'pictorialBar',
barCategoryGap: '-10%',
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
color: '#0078FF',
label: {
show: true,
position: 'top',
},
data: data,
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。