| Echarts bar纵向柱状图超详细细节配置 | 您所在的位置：网站首页 › 柱形图怎么把横向变成纵向 › Echarts bar纵向柱状图超详细细节配置 |
|
上一篇横向柱状图：https://juejin.cn/post/6999901838384300040 原文地址：https://juejin.cn/post/6999630442362044447 纵向柱状图Echarts图标样式个性化设置，如x轴间距，y轴样式，图例自定义，提示框自定义，数据列悬浮高亮，坐标指示器背景渐变色等等 纵向柱状图实现本质和横向是一样的，就是将 x，y 轴值更换一下；x 轴为value，y 轴为category let option = { xAxis: { type: "value", }, yAxis: { type: "category", }, }; 坐标指示器背景渐变色其实原理和横向的一样，就是渐变色处理的地方 x，y 值更换一下 let horizontalColor = { type: "linear", x: 1, // 更换 y: 0, x2: 0, y2: 0, // 更换 colorStops: [ { offset: 0, color: "rgba(234,244,255,1)" }, { offset: 1, color: "rgba(234,244,255,0.3)" }, ], global: false, }; 柱体设置不同颜色柱体的属性设置series中color可以是一个函数，在函数中处理。核心代码为colorList[params.dataIndex] let colorList = [ "#1890ff", "#52c41a", "#faad14", "#f5222d", "#1DA57A", "#d9d9d9", ]; let series = [ { type: "bar", barWidth: 16, itemStyle: { // 定制显示（按顺序）,实现不同颜色的柱体 color: (params) => { return colorList[params.dataIndex]; }, }, dimensions: ["类型", "销售数量"], }, ]; 柱状图上方显示数值柱体的属性设置series中label可以是一个函数，在函数中处理。可以设置位置，字体颜色和大小等。核心代码为params.value[params.encode.x[0]]。 let series = [ { // ...... type: "bar", label: { // 柱图头部显示值 show: true, position: "right", color: "#333", fontSize: "12px", formatter: (params) => { return params.value[params.encode.x[0]]; }, }, }, ]; tooltip 提示框自定义和横向的一样，就是要注意取值params[0].axisValue, item.seriesName, item.value[item.encode.x[0]] let tooltip = R.merge(tooltip, { formatter: function(params) { let html = ` ${params[0].axisValue} ${params .map( ( item ) => ` |
| CopyRight 2018-2019 实验室设备网 版权所有 |