echarts-锥型柱状图
生活随笔
收集整理的這篇文章主要介紹了
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-锥型柱状图的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: “云筑百城”落户苏州,新华三赋能“工业云
- 下一篇: POS--权益证明机制