echarts自定义柱状图

沐左z

已于 2022-05-10 14:57:26 修改

阅读量1.7k

点赞数

文章标签： echarts javascript ecmascript

于 2022-05-10 14:49:17 首次发布

本文链接：https://blog.csdn.net/weixin_52180195/article/details/124688130

版权

这篇博客展示了如何利用Echarts库自定义柱状图，包括设置不同城区的数据和图片，以及调整图表样式，如背景颜色、轴线、提示框等。通过示例代码，读者可以了解到如何实现固定重复的图片符号以及添加标签和动画效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

const img1 = {
a: ‘…/…/assets/images/group010/ruzi.png’,
b: ‘…/…/assets/images/group010/ruzi1.png’,
};

const img2 = {
a: ‘…/…/assets/images/group010/rub.png’,
b: ‘…/…/assets/images/group010/rulan1.png’,
};

const img3 = {
a: ‘…/…/assets/images/group010/rucheng.png’,
b: ‘…/…/assets/images/group010/rucheng1.png’,
};
const img4 = {
a: ‘…/…/assets/images/group010/rlv.png’,
b: ‘…/…/assets/images/group010/rulv1.png’,
};

const value = 1; // >0

export const qianKeYongHuOption = {
title: {
text: ’ 用户数量- 自定义柱状图’,
subtext: ‘pictorialBar - 自定义柱状图’,
textStyle: {
color: ‘#fff’,
fontSize: 16
},
left: ‘4.5%’,
top: ‘25%’
},