echarts 横向柱状图示例-编程知识

该示例有如下几个特点：
①实现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,},]
}
效果图如下：