一、界面效果
二、代码实现
数据:
newData: {
ydata: [
{ name: "8080",
value: 1000,
},
{
name: "28",
value: 2000,
},
{
name: "6979",
value: 3000,
},
{
name: "9448",
value: 4000,
},
{
name: "22",
value: 5000,
},
{
name: "7850",
value: 6000,
},
{
name: "2889",
value:7000,
},
{
name: "9443",
value: 8000,
},
{
name: "2889",
value: 9000,
},
{
name: "2889",
value: 10000,
},
],
},
echarts代码:
this.options = {
backgroundColor:'rgba(123, 123, 212, 0.342)',
xAxis: {
max: this.total,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
grid: {
left: 85,
top: 20, // 设置条形图的边距
right: 30,
bottom: 20,
},
yAxis: [
{
type: "category",
inverse: false, //是否反向坐标轴
data: this.newData.ydata,
//坐标轴线相关设置
axisLine: {
show: false,
},
//坐标轴刻度相关设置
axisTick: {
show: false,
},
//坐标轴刻度标签的相关设置
axisLabel: {
show: false,
},
},
],
series: [
{
// 内
type: "bar",
barWidth: 18,
legendHoverLink: false, //是否启用图例 hover 时的联动高亮
silent: true, //?
itemStyle: {
normal: {
// 柱条颜色
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#3BECFB", // 0% 处的颜色
},
{
offset: 1,
color: "#FEE190", // 100% 处的颜色
},
],
},
},
},
label: {
normal: {
fontWeight:800,
fontFamily:'Avenir-Heavy, Avenir',
show: true, //是否显示标签
position: [-59, 2], //标签的位置
formatter: "{b}", //标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行
textStyle: {
color: "#00D7EC",
fontSize: 18,
},
},
},
data: this.newData.ydata,
z: 1, //柱状图组件的所有图形的z值。控制图形的前后顺序。
animation: true,
animationEasing: "elasticOut", //初始动画的缓动效果。不同的缓动效果可以参考
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#061348",
},
},
symbolRepeat: "fixed",//元素重复
FileSystemDirection:'end',
symbolMargin: 3, //图形的两边间隔
symbol: "rect",//图形类型
symbolClip: true,
symbolSize: [1, 20],//图形大小[宽,高]
symbolPosition: "start", //图形定位
symbolOffset: [0, 0], //图形相对原位置的偏移
symbolBoundingData: this.total,//是图形绘制的界限
data: this.newData.ydata,
z: 2,
animationEasing: "elasticOut",
},
],
};