该示例有如下几个特点：
①实现tooltip自定义样式（echarts 实现tooltip提示框样式自定义-CSDN博客）
②实现数据过多时滚动展示（echarts 数据过多时展示滚动条-CSDN博客）
③柱状图首尾展示文字，文字内容嵌入图片
④柱状图终点处图片展示
代码如下：
this.options = {
// 设置图表的位置
grid: {
x: 24, // 左间距
y: 20, // 上间距
x2: 24, // 右间距
y2: 5, // 下间距
containLabel: true, // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
},
// 提示框组件
tooltip: {
trigger: "axis", // 触发类型, axis: 坐标轴触发
axisPointer: {
// 指示器类型 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
// 其实是种简写，表示启用两个正交的轴的 axisPointer。
type: "none",
},
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
// 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
// formatter: "{b}: {c}件",
className: 'custom-tooltip-box',
formatter: function(params) {
return `<div class='custom-tooltip-style'><span>${params[0].name}</span></br><div class="span"><span>库存数：</span><span>${params[0].value}</span></div></div>`
},
},
// X轴
xAxis: {
type: "value", // 坐标轴类型, 'value' 数值轴，适用于连续数据
// 坐标轴刻度
axisTick: {
show: false, // 是否显示坐标轴刻度 默认显示
},
// 坐标轴轴线
axisLine: {
// 是否显示坐标轴轴线 默认显示
show: false, // 是否显示坐标轴轴线 默认显示
},
// 坐标轴在图表区域中的分隔线
splitLine: {
show: false, // 是否显示分隔线。默认数值轴显示
},
// 坐标轴刻度标签
axisLabel: {
show: false, // 是否显示刻度标签 默认显示
},
},
yAxis: [
// 左侧Y轴
{
type: "category", // 坐标轴类型, 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
// 坐标轴刻度
axisTick: {
show: false, // 是否显示坐标轴刻度 默认显示
},
// 坐标轴轴线
axisLine: {
// 是否显示坐标轴轴线 默认显示
show: false, // 是否显示坐标轴轴线 默认显示
lineStyle: {
// 坐标轴线线的颜色
color: "#fff",
},
},
// 坐标轴在图表区域中的分隔线
splitLine: {
show: false, // 是否显示分隔线。默认数值轴显示
},
// 坐标轴刻度标签
axisLabel: {
show: true, // 是否显示刻度标签 默认显示
fontSize: 16, // 文字的字体大小
color: "#ffffff", // 刻度标签文字的颜色
// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: function(value) {
return `{img|}{name|${value}}`
},
rich: {
img:{
backgroundColor: {
image: "data:image/webp;base64,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"
},
width: 20,
height: 20
}
},
inside: true,
textStyle: {
verticalAlign: "top",
padding: [-26, 0, 0, 0],
},
},
data: this.echartData, // 类目数据，在类目轴（type: 'category'）中有效
},
// 右侧Y轴
{
type: "category", // 坐标轴类型, 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
// 坐标轴轴线
axisLine: {
show: false,
},
// 坐标轴刻度
axisTick: {
show: false,
},
// 坐标轴刻度标签
axisLabel: {
show: true, // 是否显示刻度标签 默认显示
fontSize: 18, // 文字的字体大小
fontWeight: 600,
color: "#ffffffcc", // 刻度标签文字的颜色
// margin: 10, // 刻度标签与轴线之间的距离
// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: "{value}",
inside: true,
textStyle: {
verticalAlign: "top",
padding: [-26, 0, 0, 0],
},
},
data: this.xAxisData, // 类目数据，在类目轴（type: 'category'）中有效
},
// 右侧Y轴 图形
{
// 坐标轴轴线
axisLine: {
show: false,
},
// 坐标轴刻度
axisTick: {
show: false,
},
// 坐标轴刻度标签
axisLabel: {
show: false
},
data: this.xAxisData, // 类目数据，在类目轴（type: 'category'）中有效
},
],
// 系列列表
series: [
{
type: "bar", // 系列类型
name: "订单转化率", // 系列名称, 用于tooltip的显示, legend 的图例筛选
barMaxWidth: 12, // 柱条的最大宽度，不设时自适应
showBackground: true, // 是否显示背景色
backgroundStyle: {
color: 'rgba(0,194,255,0.2)'
},
// 图形上的文本标签
label: {
show: false,
// 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
position: "inside",
},
// 图形样式
itemStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(0,133,255,0)" // 0% 处的颜色
},
{
offset: 1,
color: "#0085FF" // 100% 处的颜色
}
])
},
},
data: this.xAxisData, // 系列中的数据内容数组
},
{
type: "pictorialBar", // 系列类型
symbol: function(value) {
if (value) {
return "image://data:image/webp;base64,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"
} else {
return ""
}
}, // 标记的图形
symbolSize: [15, 15], // 标记的大小
symbolOffset: [10, 0], // 标记的偏移
symbolPosition: "end", // 标记的位置
// 图形的样式
itemStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: function(params) {
if(params.value == 0) {
return "rgba(255,255,255,0)"
}
}
},
},
z: 12, // 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖
data: this.xAxisData, // 系列中的数据内容数组
},
],
dataZoom: [
{
// 设置滚动条的隐藏与显示
show: this.xAxisData.length > 12 ? true : false,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "#fff",
// 设置选中范围的填充颜色
fillerColor: "#027FFF",
// 设置边框颜色
borderColor: "#027FFF",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: this.xAxisData.length - 1,
// 数据窗口范围的结束数值（一页显示多少条数据，从0开始）
endValue: this.xAxisData.length - 11,
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: 6,
// 设置滚动条高度
height: '100%',
// bottom: 4,
// 设置滚动条显示位置
// left: 20,
// right: 10, //右边的距离
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
// handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
// xAxisIndex: [0],
// 控制哪个轴，如果是number表示控制一个轴，
// 如果是Array表示控制多个轴。此处控制第二根轴
yAxisIndex: [0, 1],
// start: 50,
// end: 50,
// zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
brushSelect: false, //刷选功能
borderRadius: 3,
showDataShadow: false, //是否显示数据阴影 默认auto
// filterMode: "filter",
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
yAxisIndex: [0, 1],
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
]
}效果图如下：
该示例中的属性可在官网中查阅，若有其他疑问可私信留言互相交流学习~
