echarts-锥型柱状图

代码：

<div class="leftCard" id="hiddenDanger" ref="hiddenDangerRef"></div><script>
mounted(){this.getCharts()
},
methods:{getCharts() { let chartDom = document.getElementById('hiddenDanger');let myChart = this.$echarts.init(chartDom);this.option = {tooltip: {trigger: 'axis',},xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],triggerEvent: true,axisTick: {alignWithLabel: true,show: false,},axisLine: {lineStyle: {color: '#D3EBFF',type: 'solid'}},axisLabel: {textStyle: {color: '#D3EBFF',fontSize: '18'}}},yAxis: {type: 'value',name: '单位：条',min: 0,interval: 100,nameTextStyle: {color: '#D3EBFF',fontSize: 18,nameLocation: 'start',},splitLine: {show: true,lineStyle: {type: 'dashed',color: '#35618B'}},axisLabel: {textStyle: {color: '#D3EBFF',fontSize: '18'}}},series: [{emphasis: {itemStyle: {opacity: 1}},data: [136, 260, 280, 165, 220, 260, 158, 165, 40, 130, 290, 210],type: 'pictorialBar',barCategoryGap: '-80%',/*多个并排柱子设置柱子之间的间距*/symbol:'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',itemStyle: {normal: {color: 'rgba(9, 136, 204, 0.3500)'}},z: 10,}]}; myChart.setOption(this.option);},
}</script>

echarts-锥型柱状图相关推荐

onu光功率多少是正常_熔融拉锥型(FBT) VS平面波导型(PLC)光分路器，如何选择？...
光分路器(Splitter)是连接光线路终端(OLT)和光网络单元(ONU)的核心光器件,其主要作用是将光信号从一根光纤中分至多条光纤中,光分路器的性能直接关系到整个网络链路的稳定性. 光分路器的工作 ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
Echarts 3D立体柱状图(源码+例图)
Echarts 3D立体柱状图,3D长方体柱状图,直接cope源码可用(源码+例图) 废话不多说,直接上代码!!! // HTML 代码 <div id="litiBar" ...
echarts实现排名柱状图
通过echarts实现排名柱状图,效果图如下,下方是完整代码,可以直接在echarts示例中运行.在线运行 let ydata = ['上海', '北京', '深圳', '天津', '河南', '新疆 ...
echarts（横向柱状图和grid）
场景最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置.后来经其他前端同事启发,他是用进度条来实现的, ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色
1.echarts横向渐变柱状图,顶部带scatter,effectScatter,背景色 (代码和效果如下) <template> <div class="chart&q ...
Echarts绘制地图柱状图
场景需求:在使用echarts渲染的时候,有需求在页面中实现在echarts地图上叠加柱状图或者折线图,饼图等场景:目前地图上叠加的代码是甘肃省的json文件,也可以更换成全国的或者其他省份的,有需要 ...
Echarts 快速上手柱状图
最简单的柱状图柱状图的series typr 为 bar option = {xAxis:{data:['a','b','c','d','e']},yAxis:{},series:{type: 'b ...
java图书分析echarts_用java实现echarts里面的柱状图
引入echarts 先在页面定义一个div 前端js代码 var columnar = echarts.init(document.getElementById('columnar')); /*发送a ...

echarts-锥型柱状图

echarts-锥型柱状图相关推荐

最新文章

热门文章