根据每个分值来改变柱状图的颜色
1.创建存放图表的dom盒子
<div ref="echartsContainer" style="height: 300px; width: 100%"></div>
2.引入echarts插件
import * as echarts from "echarts";
3.初始化init方法
init(){
this.myChart = echarts.init(this.$refs.echartsContainer);
var option = {}
this.myChart.setOption(option);
}
4.在option对象中编写样式与数据
①创建x轴数据
xAxis: [
{
type: "category",
data: ['一年一班', '一年二班', '一年三班', '一年四班', '一年五班'],
axisTick: { show: false },
},
],
②创建y轴数据
yAxis: [
{
type: "value",
min:20,
max:90,
},
],
③创建series属性
series: [
{
type: "bar",
barWidth: 15,
data: [30, 60, 90, 60, 30],
},
],
④创建鼠标移入柱状图的样式与数据
tooltip: {
trigger: "axis",
axisPointer: {
label: {
backgroundColor: "#6a7985",
},
lineStyle: {
color: "rgba(246, 78, 96, 1)",
},
},
},
形成基本图表
5.调整样式与数据
①关闭图表的y轴横线显示
yAxis: [
{
type: "value",
splitLine: { show: false },
min:20,
max:90,
},
],
②调整柱状图的渐变颜色
series: [
{
type: "bar",
barWidth: 15,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:
[
{
offset: 0,
color: "rgba(47, 92, 230, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(151, 211, 251, 1)", // 100% 处的颜色
},
],
},
},
data: [30, 60, 90, 60, 30],
},
],
③格式化y轴显示的数据
yAxis: [
{
type: "value",
splitLine: { show: false },
min:20,
max:90,
axisLabel: {
// 使用 formatter 函数自定义标签内容
formatter: function(value) {
// 根据需要自定义显示的内容
if(value=='90'){
return value = 'A'
}else if(value=='60'){
return value = 'B'
}else if(value=='30'){
return value = 'C'
}
}
}
},
],
④采用echarts分段型视觉映射组件
visualMap: {
type: 'piecewise', // 使用分段视觉映射
dimension: 1, // 使用 y 轴的数据作为映射的维度
top: '0%',
right: '0%',
orient: 'horizontal',
inverse: true,
pieces: [
{gte: 0, lt: 60,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:
[
{
offset: 0,
color: "rgba(222, 41, 0, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255, 140, 26, 1)", // 100% 处的颜色
},
],
}
}, // y 轴值大于等于0且小于20的颜色为绿色
{gte: 60, lt: 90,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:
[
{
offset: 0,
color: "rgba(47, 92, 230, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(150, 210, 250, 1)", // 100% 处的颜色
},
],
}
}, // y 轴值大于等于20且小于40的颜色为橙色
{gte: 90,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:
[
{
offset: 0,
color: "rgba(0, 201, 188, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0, 204, 82, 1)", // 100% 处的颜色
},
],
}
} // y 轴值大于等于40的颜色为红色
],
},
最后调整图表与dom四周的间距
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true,
},
调整分段图例文字显示
visualMap: {
type: 'piecewise', // 使用分段视觉映射
dimension: 1, // 使用 y 轴的数据作为映射的维度
top: '0%',
right: '0%',
orient: 'horizontal',
inverse: true,
pieces: [
{gte: 0, lt: 60,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:
[
{
offset: 0,
color: "rgba(222, 41, 0, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255, 140, 26, 1)", // 100% 处的颜色
},
],
}
}, // y 轴值大于等于0且小于20的颜色为绿色
{gte: 60, lt: 90,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:
[
{
offset: 0,
color: "rgba(47, 92, 230, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(150, 210, 250, 1)", // 100% 处的颜色
},
],
}
}, // y 轴值大于等于20且小于40的颜色为橙色
{gte: 90,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:
[
{
offset: 0,
color: "rgba(0, 201, 188, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0, 204, 82, 1)", // 100% 处的颜色
},
],
}
} // y 轴值大于等于40的颜色为红色
],
formatter: function(value) {
// 根据需要自定义显示的内容
if(value=='90'){
return value = 'A'
}else if(value=='60'){
return value = 'B'
}else if(value<='30'){
return value = 'C'
}
}
},
🌟 关于我 🌟
你好呀，感谢一直陪伴在这里的你！我是程序媛‘小帅哥’。在这里，我致力于分享前端领域的知识点，希望能为你的工作与生活带来一丝灵感与帮助。同时也虚心求取前辈们的指点， 我会努力，努力，在努力！！！！
💼 服务承接 💼
如果你也喜欢我的内容，或者正在寻找前端或者后端方面的帮助，那么请不要犹豫，联系我吧！我都愿意倾听你的想法，共同探索更多可能。
欢迎关注微信公众号：自学PS转前端
