Echarts堆叠柱状图显示百分比

效果图
js代码

效果图

js代码


//各行业企业分布情况
function showBar1 (x,data) {var chart = echarts.init(document.getElementById('bar2'))chart.setOption({tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'},formatter:function(datas){var res = datas[0].name + '<br/>', val;let percent = '';if(datas[0].value=='0'){percent = 0;}else{percent = ((datas[1].value / datas[0].value) * 100).toFixed(2);}let dotColor0 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + datas[0].color + '"></span>'let dotColor1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + datas[1].color + '"></span>'res += dotColor0 + datas[0].seriesName  + ": " + datas[0].value  + '</br>';res += dotColor1 + datas[1].seriesName  + ": " + datas[1].value  + '</br>';res += '覆盖率: '  + percent + '%' + '</br>'return res; }},legend: {data: ['企业数', '安责险企业数'],textStyle: {color: '#97B8C9',fontSize: 16},left: '50%',top: '10%',},grid: {top: '30%',left: '3%',right: '5%',bottom: '15%',containLabel: true},dataZoom: [{show: true,bottom: '4%',start: 0,end: 70,height: 20,backgroundColor: 'rgba(9,75,127,0.2)',fillerColor: '#094B7F',borderColor: '#094B80',textStyle: {color: '#97B8C9'}}],xAxis: [{type: 'category',data: x,splitLine: {lineStyle: {color: '#07274D'}},axisLine: {lineStyle: {color: '#07274D'}},axisTick: {lineStyle: {color: '#1178C9'}},axisLabel: {interval: 0,textStyle: {color: '#97B8C9',fontSize: 14},formatter: function (v) {if (v.length > 5) {return v.substring(0, 5) + '...';}return v;}}}],yAxis: [{type: 'value',axisLabel: {textStyle: {color: '#97B8C9',fontSize: 16}},axisLine: {show: true,lineStyle: {color: '#07274D'}},axisTick: {lineStyle: {color: '#1178C9'}},splitLine: {show: false}}],series: [{name: '企业数',type: 'bar',barGap: '-100%', // Make series be overlap// barWidth: '50%',yAxisIndex: 0,data: data.entNum,itemStyle: {normal: {color: '#199ed8'}},label: {normal: {show: true,position: 'top',fontSize: 16}},barWidth : 35},{name: '安责险企业数',type: 'bar',yAxisIndex: 0,data: data.entBxNum,itemStyle: {normal: {color: '#008000'}},label: {normal: {show: true,position: 'top',fontSize: 16}},barWidth : 35}]})$(window).resize(function () {chart.resize()})return chart}

Echarts堆叠柱状图显示百分比相关推荐

echarts堆叠柱状图中显示百分比，tooltip展示百分比和数量
一.需求 1.后端返回的是堆叠图的每个类型的数量组成的数组,需要计算出每一个横向柱状里每个类型占的百分比,然后显示 2.点击某个柱状时,弹窗tooltip里要展示这个柱状中每个类型的百分比和数量二. ...
关于使用echarts堆叠柱状图百分比显示的问题
关于使用echarts堆叠柱状图百分比显示的问题平常工作没有涉及到echarts,所以平常也没有去关注图表这一块,然后碰到一个需求,要求使用堆叠柱状图,但是数值是需要百分比显示的,不是在所获取到的数 ...
echarts 堆叠柱状图
methods: {// 堆叠柱状图显示总数drawHistorygram() {const myChart = echarts.init(this.$refs.historygramEchart)/ ...
echarts 堆叠柱状图在顶部显示数据总数
项目需求: 在堆叠柱状图顶部显示该柱条所有数据的总和. 效果图: 代码实现: //原有堆叠柱状图数据 let series = [{name: '优秀',type: 'bar',stack: 'x', ...
echarts 堆叠柱状图3d效果_【python可视化】：pyecharts：柱形图、堆叠条形图、极坐标堆叠柱形图、极坐标堆叠分类条形图...
•本文字数:约1000字•阅读时长:约3分钟•难度:2颗星官方介绍:pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echa ...
echarts 饼图内部显示百分比，外部显示文字说明
为了实现产品的要求,饼图中既显示百分比又显示文字的说明(如下图) 查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在 ...
Echarts饼图,以及显示百分比的文字
这样就可以实现饼图点击某一部分,监听点击事件: 试了其他博友的方式都没用,这个是最简单的方式了. // 处理点击事件并且跳转到相应的百度搜索页面 eCharts.on('click', functio ...
echarts堆叠柱状图加折线图详细介绍
先介绍一下成品图这个图形主要就是采用echarts,直接上代码. <!DOCTYPE html> <html> <head><meta charset=&q ...
echarts 堆叠柱状图label显示总和
记录一下使用echart的柱状图堆叠时,需要在柱状图顶部显示总计数值的问题.参考文章的实现,再堆叠一个透明的柱状图来显示总和数据标签,最后就是在触发legend切换时,更换option.缺点是切换le ...
echarts柱状图显示百分比_Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总...
增加了显示比例,显示内容显示比例代码显示完整代码: series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap ...

Echarts堆叠柱状图显示百分比

Echarts堆叠柱状图显示百分比

效果图

js代码

Echarts堆叠柱状图显示百分比相关推荐

最新文章

热门文章