vue echarts 条纹柱状横向图

实现效果：

<template><div id="BusinessTop5Chart" style="flex: 1; height: 300px; width: 614px; margin-left: 10px"></div>
</template>
<script>
import { getNoteMatters } from '@/api/government';
const colors = ['rgba(248, 75, 110, 1)','rgba(239, 142, 47, 1)','rgba(234, 202, 4, 1)','rgba(79, 224, 255, 1)','rgba(106, 196, 255, 1)',];
export default {data() {return {list: [],list1: [],list2: [],Top5ListName: [],Top5ListValue:[]};},mounted() {this.getNoteMatters();},methods: {initMap() {var myChart = this.$echarts.init(document.getElementById('BusinessTop5Chart'));const option = {grid: {top: 20,bottom: 30,left: 10,right: 150,containLabel: true,},tooltip: {show: true,trigger: 'axis',axisPointer: {type: 'shadow',},},xAxis: {type: 'value',splitLine: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},axisTick: {show: false,},position: 'top',},yAxis: {type: 'category',data: this.Top5ListName,inverse: true, //倒叙axisLine: {show: false,},axisTick: {show: false,},axisLabel: {textStyle: {color: 'rgba(255,255,255,0.85)',fontSize: 14,fontFamily: 'TencentSans',},padding: [0, 0, 20, 0],inside: true,verticalAlign: 'bottom',},},series: [{type: 'bar',barGap: '-90%',barMaxWidth: 14,z: 0,label: {normal: {show: false,position: 'right',fontSize: 14,offset: [16, 0],},},data: this.list,},{type: 'bar',barGap: '-90%',barMaxWidth: 14,itemStyle: {color: 'rgba(26, 49, 99, 0.5)',},tooltip: {show: false,},data: this.list1,},{type: 'pictorialBar',symbolRepeat: 'fixed',symbolMargin: 4,symbol: 'rect',symbolClip: true,symbolSize: [1, 14],symbolPosition: 'start',itemStyle: {color: 'rgba(0,0,0,1)',},data: this.list2,},],};myChart.setOption(option);},getNoteMatters() {getNoteMatters().then((res) => {const { status, data } = res;const { businessTpo5 } = JSON.parse(data);if (status === 200) {// this.Top5ListName=[//      {0: "三亚市税务局", //       1: "三亚市市场监督管理局", //       2: "三亚市公安局", //       3: "三亚市邮政管理局", //       4: "三亚市社会保险服务中心窗口"}]this.Top5ListName = businessTpo5.map((item) => {return item.agencies;});// this.Top5ListValue=[{0: 189354, 1: 56933, 2: 13267, 3: 10979, 4: 9054}]this.Top5ListValue = businessTpo5.map((item) => {return Number(item.num);});const max = Math.max.apply(null, this.Top5ListValue);// this.list=[{itemStyle://         color: "rgba(248, 75, 110, 1)"//      name: "三亚市税务局"//      num: "189354"//       rate: "57.03%"//      value: 189354}]this.list = businessTpo5.map((item, index) => {let obj = {name: item.agencies,value: Number(item.num),num: item.num,rate: item.rate,itemStyle: {color: colors[index],},};return obj;});// this.list1=[// label:{// normal:{// color: colors[index],// fontSize: 14// position: "right"// show: true// offset:[16,0]// name: "三亚市税务局"// formatter(){return(item.num+'单位'+''+item.rate)}// rate: "57.03%"// value: 189354}}this.list1 = businessTpo5.map((item, index) => {let obj = {name: item.agencies,value: max,label: item.num,rate: item.rate,label: {normal: {show: true,position: 'right',fontSize: 14,color: colors[index],offset: [16, 0],formatter() {return (item.num + '件' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + item.rate);},},},};return obj;});// this.list2=[{label: "189354"// name: "三亚市税务局"// rate: "57.03%"// value: 189354}]    this.list2 = businessTpo5.map((item) => {let obj = {name: item.agencies,value: Number(item.num),label: item.num,rate: item.rate,};return obj;});}this.initMap();});},},
};
</script>

over

vue echarts 条纹柱状横向图相关推荐

django Echarts画柱状推移图
1. 首先确定要画什么样的图,在Echarts官网找好案例 2.根据图确认需要准备的数据,从后台准备数据传递给模板 3.模板渲染,使用Echarts组件功能完成自己想要的内容中间遇到几个坑: 1. ...
echarts 柱状堆叠图（图例和x轴都是动态的）
问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 .图例(legend),x轴(xAxis)都是写死的.但是一般实际应用中都是动态的.下面就举个例子,实现图例和x轴都是动态的 ...
柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据使用了双x轴实现重合使用了stack实现堆积使用了legendselectchanged和dispatchAction重写了图例点击事 ...
label mpchart 饼图_Origin系列：绘制柱状堆积图
原创不易,感谢分享,欢迎转发,请点在看堆积柱状图十分美观,不仅能够展示数据占比,更能表现其变化趋势,是科研必备技能今天分享粉丝提出类似下列图形用Origin绘制多列柱状堆积图.希望对大家有所帮助 ...
如何展现两极化数据，Excel柱状断层图不二之选
点赞再看,养成习惯:至长反短,至短反长. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文 GitHub https://github.com/hugogoos/Excel 已收录,包含Ex ...
exlc如何对比_excel表格图形数据比较-Excel如何做柱状对比图
excel表格怎么做数据对比图 Excel的图表功能已供了柱状对,下面以Excel 2010为例进行实例演示--用柱状图对比显示下面数据列一和系列二 1.选中数据→插入→柱形图→簇状柱形图 2.因为数 ...
SwiftUI之深入解析如何使用组合矩形GeometryReader创建条形（柱状）图
一.图表布局条形(柱状)图以矩形条的形式呈现数据的类别,其宽度和高度与它们表示的值成比例.SwiftUI 对探索不同布局和预览实时视图结果是很友好的,很容易将部分内容提取到子视图中,以便每个部分都很 ...
使用 D3.js 创建柱状堆积图
柱状堆积图项目地址使用 D3.js 创建的图表: 使用 D3.js 创建根据值域颜色渐变的地图 D3.js 中动态计算 x 轴 y 轴的宽度以及偏移量在 Ember.js 项目中由浅入深使用 D ...
python pyecharts Bar柱状堆叠图
柱状堆叠图,适合两个商家直接比较 attr=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋" ...
柱状山地图（我的世界风地图）（100种制图法4）
柱状山地图(我的世界风地图) 一.问题制作一幅柱状山(我的世界)风格的地图二.操作步骤 1.加载数据加载数据结果图 2.环境设置环境设置参数设置 3.投影栅格投影栅格参数设置投影栅格结果图 ...

vue echarts 条纹柱状横向图

vue echarts 条纹柱状横向图相关推荐

最新文章

热门文章