柱状图柱子上面显示数字

tab切换echarts数据
<div class="tab-box"><WorkTab:default-current-index="currentTableIndex":tab-width="50"class="tabBox box":data-list="tabList"@onClickTab="onClickTable"/></div><div class="echartBox"><v-chart :options="areaOption" :autoresize="true" class="echart" /></div>

<script>
import echarts from 'echarts'
export default {name: '',props: {},data() {return {currentTableIndex: 0,industryDataX: ['制造业','化学工业','农林牧渔','能源','金融','信息技术服务业','建筑业','批发和零售','教育'],industryDataS: [30, 25, 27, 54, 45, 16, 18, 20, 55],areaDataX: ['陇南市','庆阳市','白银市','嘉峪关市','兰州新区','兰州市','酒泉市','天水市','张掖市','武威市','临夏州','平凉市','金昌市','定西市','甘南州'],areaDataS: [52, 18, 25, 35, 17, 10, 17, 30, 25, 27, 54, 45, 16, 18, 20],areaOption: {title: {text: '',x: 'center',top: 5},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {x: 'right',data: '执法强度分析'},grid: {top: '15%',left: '3%',right: '4%',bottom: '0%',containLabel: true},xAxis: [{type: 'category',data: [],axisLabel: {show: true,interval: 0,rotate: 40,textStyle: {color: '#e2e9ff'}}}],yAxis: [{name: '个',nameTextStyle: {color: '#ffffff',fontSize: 12},max: 60,min: 0,splitNumber: 5,type: 'value',axisLabel: {show: true,textStyle: {color: '#ffffff'}},splitLine: {lineStyle: {color: 'rgba(255,255,255,0.12)'}}}],series: [{name: '行业分布',type: 'bar',barWidth: 10,stack: 'area',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(0,244,255,1)' // 0% 处的颜色},{offset: 1,color: 'rgba(0,77,167,1)' // 100% 处的颜色}],false),barBorderRadius: [30, 30, 30, 30],shadowColor: 'rgba(0,160,221,1)',shadowBlur: 4,label: {show: true, // 开启显示position: 'top', // 在上方显示textStyle: {// 数值样式color: '#ffffff',fontSize: 12}}}},data: []}]},tabList: [{name: '按区域',value: ''},{name: '按行业',value: ''}]}},methods: {onClickTable(index) {this.currentTableIndex = indexif (index === 0) {this.areaOption.xAxis[0].data = this.areaDataXthis.areaOption.series[0].data = this.areaDataS} else if (index === 1) {this.areaOption.xAxis[0].data = this.industryDataXthis.areaOption.series[0].data = this.industryDataS}}},mounted() {this.areaOption.xAxis[0].data = this.areaDataXthis.areaOption.series[0].data = this.areaDataS}
}
</script>

.echartBox {width: 100%;height: 6.75rem;margin-top: 0.25rem;background-color: #0d1b53;.echart {width: 100%;height: 100%;}}

效果如下：

柱状图柱子上面显示数字相关推荐

Echart柱状图-柱子顶部显示数值/显示图标
柱子顶部显示数值效果柱子顶部显示数值+图标 import EchartInit from '@/components/EchartInit';const IMG = ['https://scpic. ...
echarts柱状图柱子上方数据标签显示
echarts柱状图柱子上方数据标签显示如图开启显示,也可以修改样式.
python横向柱状图-python画柱状图--不同颜色并显示数值的方法
用python画柱状图容易,但是如何对不同柱子使用不同颜色呢?同时在柱子顶端显示精确数值? 主要用的方法为: atplotlib.pyplot.bar(left, height, width=0.8, ...
python画柱形图显示数值_python画柱状图--不同颜色并显示数值的方法
用python画柱状图容易,但是如何对不同柱子使用不同颜色呢?同时在柱子顶端显示精确数值? 主要用的方法为: atplotlib.pyplot.bar(left, height, width=0.8, ...
echarts 柱状图柱子改成圆柱体_年终总结的业务报告怎么展开？柱状图让业绩一目了然...
企业每天都有庞大的销量数据产生,成功的企业能够对业务部门的数据进行分析,从而指导自己的业绩提升.知名品牌阿迪达斯就拥有非常成功的案例.阿迪达斯每天都会收集旗下门店的销量数据,形成销量数据报告,让经销商 ...
双柱状图柱子数量比较多_微生物组数据冲击图和柱状图一条代码解决
00. 写在前面堆叠柱状图用于表征高维数据,例如微生物群落,代谢物组成是一种常见的图表类型,所以使用的次数也非常多,理所应当被封装成函数,一键绘制. 冲击图其实添加了堆叠柱状图之间的连线,这对于柱子 ...
STM8控制4位LED数码管显示数字
用4位LED显示数字#define STB_H GPIOC->ODR |= (uint8_t)(GPIO_PIN_2) #define STB_L GPIOC->ODR &= (u ...
python PyQt5 QLCDNumber类（用于显示数字或一些符号的容器）
https://doc.qt.io/qtforpython/PySide2/QtWidgets/QLCDNumber.html?highlight=qlcdnumber#PySide2.QtWidge ...
android webview 数字键盘,android – 在WebView中显示数字键盘
我有一个webview,我在登录屏幕上手动显示键盘并专注于输入字段. 领域: 聚焦和显示键盘: webView.requestFocus(View.FOCUS_DOWN); webView.loadU ...
html5输入框自动放大镜,JS 仿支付宝input输入显示数字放大镜
本文就为大家带来一篇JS 仿支付宝input文本输入框放大组件的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. input输入的时候可以在后边显 ...

柱状图柱子上面显示数字

柱状图柱子上面显示数字相关推荐

最新文章

热门文章