首页 > 其他分享 >echarts 立体柱状图

echarts 立体柱状图

时间:2022-11-21 17:06:05浏览次数:60  
标签:false show color 立体 柱状图 rgba data echarts 255

 

echarts 立体柱状图

option = {
"grid":
{
"top": "0%",
"bottom": "8%",
"right": "0%",
"left": "0%"
},
"xAxis":
{
"data": [],
"axisTick":
{
"show": false
},
"axisLine":
{
"show": false
},
"axisLabel":
{
"show": true,
"interval": 0,
"textStyle":
{
"color": "#fff"
},
"margin": 20
}
},
"yAxis":
{
"splitLine":
{
"show": false
},
"axisTick":
{
"show": false
},
"axisLine":
{
"show": false
},
"axisLabel":
{
"show": false
}
},
"series": [
{
"z": 1,
"type": "bar",
"barWidth": 34,
"barGap": "-100%",
"itemStyle":
{
"normal":
{
"color":
{
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [
{
"offset": 0,
"color": "rgba(255,7,7,0)"
},
{
"offset": 0.75,
"color": "rgba(255,0,0,0.6)"
},
{
"offset": 1,
"color": "rgba(255,0,0,0.6)"
}],
"global": false
}
}
},
"data": [16]
},
{
"z": 1,
"type": "pictorialBar",
"symbolPosition": "end",
"data": [16],
"symbol": "diamond",
"symbolOffset": [0, "80%"],
"symbolSize": [34, 17],
"itemStyle":
{
"normal":
{
"color": "rgba(255,7,7,0.3)",
"borderColor": "rgba(255,0,0,1)",
"borderWidth": 10
}
}
},
{
"type": "bar",
"barWidth": 34,
"itemStyle":
{
"normal":
{
"color": "rgba(224,28,28,1)"
}
},
"data": [3.2],
"z": 1
},
{
"z": 3,
"legendHoverLink": false,
"hoverAnimation": false,
"type": "pictorialBar",
"symbolPosition": "end",
"data": [3.2],
"symbol": "diamond",
"symbolOffset": [0, "-50%"],
"symbolSize": [34, 17],
"itemStyle":
{
"normal":
{
"borderWidth": 0,
"color": "rgba(255,126,93,1)"
}
}
},
{
"z": 2,
"legendHoverLink": false,
"hoverAnimation": false,
"type": "pictorialBar",
"data": [0],
"symbol": "diamond",
"symbolOffset": [0, "50%"],
"symbolSize": [34, 17],
"itemStyle":
{
"normal":
{
"color": "rgba(255,126,93,1)"
}
}
}]
}

 

echarts 立体柱状图_柱状图

 

标签:false,show,color,立体,柱状图,rgba,data,echarts,255
From: https://blog.51cto.com/u_15311558/5874271

相关文章

  • 84.柱状图中最大的矩形 largest-rectangle-in-histogram
    问题描述84.柱状图中最大的矩形解题思路首先,要找最大矩形,即要找每个heights[i]所能构成的矩形面积的最大值:heights[i]所能构成的最大矩形,左侧,右侧必定都是连续的大于......
  • echarts柱状图经验
    涉及知识点1.动态单位,以及单位的及时变化2.窗口变化,重新渲染echarts3.tooltips自定义4.Y轴刻度过长的处理相关代码<template><divclass="usageAll"><route......
  • echarts 图表设置默认选中
    一、数据图形import*asechartsfrom'echarts'constmyChart=echarts.init(document.querySelector('pie'))​​官方文档events​​​​官方文档action​​设置高亮m......
  • vue2 echarts 报错 mounted Initialize failed: invalid dom. 的一种解决方法
    如题参考了https://blog.csdn.net/weixin_52418790/article/details/123690752但是还是不行,后来发现我这个是在elementui的模态框里面写的,但是模态框还没有......
  • echarts补充2022-11-19
    当在众多echarts模板中找到一个统计图时,并且对完接口展示数据了,才发现指向统计图的说明文字带有灰白色的阴影。然后在复制的option参数里面也没有发现任何与shadow相关的......
  • 使用JSZIP打包下载多个echarts图片
    JSZIP的github地址:https://github.com/Stuk/jszip多个echarts图一键下载charts_all.map(([index,myChart])=>{constimgContent=myChart.getDataURL({......
  • leaflet 点击图标显示echarts图表弹框
    leaflet散点图片根据官方文档我们应该都可以加载出来,点击如果想弹出简单的文本内容,title属性加载一个自定义html就可以了,但有时项目需求需要配合别的图表组件使用,简单记录......
  • echarts tooltip 中添加点击事件(vue项目)
    最近碰见一个需求,就是Echarts地图提示框中有网址,点击网址的时候跳转到指定的网页,  这个需求挺有意思,刚开始写的时候感觉应该就是普通的逻辑,没啥特别注意的,后来在写......
  • echarts 图表设置默认选中
    一、数据图形import*asechartsfrom'echarts'constmyChart=echarts.init(document.querySelector('pie'))官方文档events官方文档action设置高亮myChart.d......
  • Echarts横向柱状图,带标题
    效果图:   首先安装echarts,看官网安装文档即可然后要用的文件引入一下import*asechartsfrom'echarts';我用的vue3,setup放标签里的     代码如......