vue echart实现横向柱状图颜色渐变、标签右对齐
2023-12-14 12:12:03
需求:用echart实现柱状图的横向展示,对指定数据的柱状图进行颜色区分,且对应标签值展示在柱状图右侧,实现文字的右对齐。
主要问题点:
1、柱状图的颜色渐变
通过colorStops设置color渐变的起止颜色,
colorStops: [
{
offset: 0.01, // 颜色的开始位置
color: 'blue' // 0% 处的颜色
},
{
offset: 0.99, // 颜色的结束位置
color: 'orange' // 100% 处的颜色
}
]
2、指定某一个柱状图颜色
给data中的指定颜色值进行特殊设置:
data: [111,0,222,555,333,666,999,
{
value: 369,
label:'巴西',
itemStyle: {
color: 'red'
}
}
]
3、使用双Y轴实现标签右对齐
设置两个Y轴,一个为原本的名字,另一个为具体对应的数值。
效果如下图所示:
完整代码如下:
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'item' //悬浮提示框不显示
},
grid: {
//绘图区调整
x: 150, //左留白
y: 30, //上留白
x2: 100, //右留白
y2: 30 //下留白
},
xAxis: [
{
show: false,
type: 'value',
boundaryGap: [0, 0],
position: 'top',
max: 'dataMax' // 保证百分比和柱状图宽度对应得上
}
],
yAxis: [
{
type: 'category',
data: ['印尼', '美国', '印度', '中国', '内蒙古', '北京', '新疆', '巴西'],
// axisTick: { // 刻度
// show: false // 不显示刻度线
// },
axisTick: {
show: true,//隐藏刻度线
alignWithLabel: true,//设置刻度线与标签对齐
length: 4
},
axisLine: {
show: true // 设置轴线
},
boundaryGap: false,// 坐标轴是否留白
},
{
type: 'category',
data: [[111], [0], [222], [555], [333], [666], [999], [369]],
// 刻度
axisTick: {
show: false // 不显示刻度线
},
axisLine: {
show: false // 设置轴线
},
axisLabel: {
textStyle: {
fontSize: '12',
color: '#a1a1a1' // 坐标值的具体的颜色
},
formatter: function (value) {
return value + '人';
}
},
boundaryGap: false
}
],
series: [
{
name: '',
type: 'bar',
tooltip: { show: false },
barMinHeight: 0, //最小柱高
barWidth: 30, //柱宽度
barMaxWidth: 100, //最大柱宽度
barGap: '-100%', // 两条柱条重叠
showBackground: true,
data: [
111,0,222,555,333,666,999,
{
value: 369,
// label:'巴西',
itemStyle: {
color: {
colorStops: [
{
offset: 0.01, // 颜色的开始位置
color: 'blue' // 0% 处的颜色
},
{
offset: 0.99, // 颜色的结束位置
color: 'orange' // 100% 处的颜色
}
]
}
}
}
],
itemStyle: {
normal: {
//柱状图颜色
// color:'red',
// 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
color: function (params) {
// var index = params.dataIndex
var colorList = [
// 渐变颜色的色值和透明度
// 透明度从0
'yellow', // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
'red'
];
return {
colorStops: [
{
offset: 0.01, // 颜色的开始位置
color: colorList[0] // 0% 处的颜色
},
{
offset: 0.99, // 颜色的结束位置
color: colorList[1] // 100% 处的颜色
}
]
};
},
label: {
show: false, //显示文本
position: ['100%', '0%'] //数据值位置
// textStyle:{ // 单独设置标签样式
// color:'#000',
// fontSize:'30'
// }
},
// 柱形图圆角,初始化效果
barBorderRadius: [0, 15, 15, 0]
}
}
}
]
};
myChart.setOption(option);
文章来源:https://blog.csdn.net/zuoyiran520081/article/details/132342970
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!