这篇“vue+echarts怎么实现条纹柱状横向图”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue+echarts怎么实现条纹柱状横向图”文章吧。
实现效果:
<template> <div id="BusinessTop5Chart" ></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>
以上就是关于“vue+echarts怎么实现条纹柱状横向图”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。