UI设计图的页面样式如下：
1.首先搭建简易版的柱状图
①安装echarts插件
npm install echarts --save
②在项目中引用
import * as echarts from 'echarts';
③准备好Dom
<div id="barChart" style="width: 100%; height: 300px;"></div>
④初始化echarts实例
initChart(n) {
//销毁
if (this.myChart) {
this.myChart.dispose();
}
this.myChart = echarts.init(document.getElementById('barChart'));
var option = {
legend: {
data: ['库存风险', '质量风险', '采购风险'],
top: '20',
itemWidth: 14,
itemHeight: 14,
itemGap: 50,
textStyle: {
fontSize: 16
}
},
grid: {
top: '20%',
bottom: '26',
left: '56',
right: '5%'
},
xAxis: {
type: 'category',
data: ['xx材料', 'xx材料', 'xx材料', 'xx材料', 'xx材料'],
axisLabel: {
textStyle: {
color: 'rgba(56, 56, 56, 1)',
fontSize: 16,
}
},
axisLine: {
show: false,
lineStyle: {
color: '#B4B4B4',
}
},
axisTick: {
show: false,
},
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#B4B4B4',
}
},
splitLine: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(56, 56, 56, 1)',
fontSize: 16,
}
},
},
series: [
{
name: '库存风险',
type: 'bar',
data: [120, 200, 150, 80, 70],
},
{
name: '质量风险',
type: 'bar',
data: [200, 240, 210, 130, 90],
},
{
name: '采购风险',
type: 'bar',
data: [150, 190, 170, 100, 60],
}
]
};
this.myChart.setOption(option);
},
⑤调整柱状图的宽度与颜色
series: [
{
name: '库存风险',
type: 'bar',
data: [120, 200, 150, 80, 70],
itemStyle: {
normal: {
color: 'rgba(42, 130, 228, 1)',
},
},
barWidth: 6
},
{
name: '质量风险',
type: 'bar',
data: [200, 240, 210, 130, 90],
itemStyle: {
normal: {
color: 'rgba(67, 207, 124, 1)',
},
},
barWidth: 6
},
{
name: '采购风险',
type: 'bar',
data: [150, 190, 170, 100, 60],
itemStyle: {
normal: {
color: 'rgba(255, 141, 26, 1)',
},
},
barWidth: 6
}
]
重点来了！重点来了！重点来了！
如何给echarts背景分割成三份不同颜色的背景图块
①添加三种背景颜色
splitArea: {
interval: "auto",
show: true,
areaStyle: {
color: ['#e3f8ec', '#f9d9b5', '#f3d3d3'] // 高风险, 中风险, 低风险背景色
}
},
背景颜色出来了，但是并没有被分割成三块，查找文档资料....
interval---强制设置坐标轴分割间隔， 配合 min、max强制设定刻度划分
yAxis: {
type: 'value',
min: 0,
max: 300,
interval: 100,
splitArea: {
interval: "auto",
show: true,
areaStyle: {
color: ['#e3f8ec', '#f9d9b5', '#f3d3d3'] // 高风险, 中风险, 低风险背景色
}
},
axisLine: {
show: false,
lineStyle: {
color: '#B4B4B4',
}
},
splitLine: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(56, 56, 56, 1)',
fontSize: 16,
}
},
},
终于被分割成了 ~~~
如何修改y轴的文字与样式
o(╥﹏╥)o 继续翻文档...... 吐血
graphic--是原生图形元素组件。可以支持的图形元素包括：
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group
这里我用到的是text文本
graphic: [
{
type: 'text',
left: '0',
bottom: '18%',
z: 100,
style: {
text: '低风险',
fontSize: 16,
fill: '#4bd181'
}
},
{
type: 'text',
left: '0',
bottom: '40%',
z: 100,
style: {
text: '中风险',
fontSize: 16,
fill: '#ff952a'
}
},
{
type: 'text',
left: '0',
bottom: '66%',
z: 100,
style: {
text: '高风险',
fontSize: 16,
fill: '#d74242'
}
}
],
这时我们就把y轴的label隐藏
axisLabel: {
show: false,
textStyle: {
color: 'rgba(56, 56, 56, 1)',
fontSize: 16,
}
},
这样我们就完成了，耶耶耶
🌟 关于我 🌟
你好呀，感谢一直陪伴在这里的你！我是程序媛‘小帅哥’。在这里，我致力于分享前端领域的知识点，希望能为你的工作与生活带来一丝灵感与帮助。同时也虚心求取前辈们的指点， 我会努力，努力，在努力！！！！
💼 服务承接 💼
如果你也喜欢我的内容，或者正在寻找前端或者后端方面的帮助，那么请不要犹豫，联系我吧！我都愿意倾听你的想法，共同探索更多可能。
欢迎关注微信公众号：自学PS转前端
