echarts如何将柱形图的柱子分割成一小块一小块，也就是象形柱图

关键点：series.type: “pictorialBar”,

<div class="cl-top-content" id="deviceOee" style="width:500px;height:200px"></div>mounted() {this.barChart();},
//设备OEEbarChart() {let myChart = this.$echarts.init(document.getElementById("deviceOee"));let option = {xAxis: {splitLine: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},axisTick: {show: false,},},grid: {left: 80,top: 20, // 设置条形图的边距right: 80,bottom: 20,},yAxis: [{type: "category",show: true,inverse: false,data: ["80%以上", "50%-80%", "50%以下"],axisLine: {show: false,},axisTick: {show: false,},axisLabel: {// 坐标轴刻度标签的相关设置show: true,margin: 15,textStyle: {fontSize: 16,color: function (value) {return value == "80%以上"? "#81D3F8": value == "50%-80%"? "#FF6600": "#FF004D";},},interval: 0,},inverse: true,},],series: [{// 内type: "bar",barWidth: 10,legendHoverLink: false,silent: true,itemStyle: {normal: {// barBorderRadius: [4, 4, 4, 4],color: function (params) {var colorlist = ["#81D3F8", "#FF6600", "#FF004D"];return colorlist[params.dataIndex];},},},label: {normal: {show: true,position: "right",distance: 20, //距离柱形的距离// formatter: "{b}",textStyle: {color: "inherit", //映射颜色fontSize: 36,},},},data: [{name: "80%以上",value: 5,},{name: "50%-80%",value: 18,},{name: "50%以下",value: 7,},],z: 1,animationEasing: "elasticOut",},{// 分隔type: "pictorialBar",itemStyle: {normal: {color: "#000",},},symbolRepeat: "fixed",symbolMargin: 5, //图形的两边间隔symbol: "rect",symbolClip: true, //是否裁剪图形symbolSize: [2, 20],symbolPosition: "start", //图形的定位位置。symbolOffset: [-2, 0], //图形相对于原本位置的偏移。data: [{name: "80%以上",value: 5,},{name: "50%-80%",value: 18,},{name: "50%以下",value: 7,},],z: 2,animationEasing: "elasticOut",},],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//若盒子宽度设为百分比，这里做自适应window.addEventListener("resize", () => {if (myChart) {myChart.resize();}});},},

echarts如何将柱形图的柱子分割成一小块一小块，也就是象形柱图相关推荐

python大列表分割成小列表_Python有什么方法将列表分割成大小均匀的块？求使用实例...
Python有什么方法将列表分割成大小均匀的块?求使用实例.我有一个任意长度的列表,我需要把它分成大小相等的块并对它进行操作.有一些很明显的方法可以做到这一点,比如保留一个计数器和两个列表,当第二个列 ...
echarts 柱状图圆柱_ECharts象形柱图
象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示,它利用图片和形状表现数据,具体来说它既可以用图形的长宽变形表现数据,也可以用图形的个数.甚至是图形的颜色.透明度 ...
echarts象形柱图整体颜色渐变
@独孤求败12138 象形柱图整体颜色渐变 echarts中的象形柱图颜色渐变只能局部内部渐变,但是我想要实现整体渐变,怎么做呢?经过我大量的搜索和官方文档及API的研究,好像并不提供这一功能,那只能 ...
echarts分段式的象形柱图
最近做项目UI那边那边提了个比较少见的需求,如图: 我一开始想到的自然是用element ui的进度条来做,但找了许久都没找到这种的样式效果. 于是考虑用柱状图,如果这三个数据只用一个柱状图自然很难实 ...
Echarts 自定义象形柱图Spirits
** Echarts 自定义象形柱图Spirits 效果封装的组件,使用时可直接换spirit与spirit1改变图片 ** //外部调用方法 <echarts2 class="pe ...
echarts 象形柱图pictorialBar
象形柱图可以被想象为是个柱状图,但是柱状图的柱子并不显示,这些柱子称为基准柱,根据基准柱来定位和显示各种象形图形1.配置datadata:[{value:n,symbol:'circle', 自定义图 ...
echarts象形柱图自定义样式（类似柱状图）
象形柱图是可以设置各种具象图形元素(如图片.SVG PathData 等)的柱状图,往往用在信息图中,用于有至少一个类目轴或时间轴的直角坐标系上. 先上一个简单的效果: 其实实现思路主要在于:绘制具有 ...
echarts人体含水量（象形柱图）更改SVG（性别占比或其他占比百分比）
在官网示例中的象形图是这样的: 如何将右边的svg更换成自己需要展示的图片百分比呢?(如下图) 第一种方法: 在iconfont官网中寻找自己合适的图标点击下载(iconfont-阿里巴巴矢量图标库) ...
特殊的象形柱图echarts
效果图 html <!DOCTYPE html> <html> <head><meta charset="UTF-8"><ti ...

echarts如何将柱形图的柱子分割成一小块一小块，也就是象形柱图

echarts如何将柱形图的柱子分割成一小块一小块，也就是象形柱图相关推荐

最新文章

热门文章