江苏公司网站建设_工程信息网站有哪些_百度地图推广怎么收费标准_seo外贸网站制作

样式如下

关键代码

// html部分<div class="echarts-container" :id="'echartDiv' + id"></div>// js部分
data() {return {myChart: null,xAxisData: ['云南', '浙江', '山东', '广东', '四川', '河南', '广西', '河南', '广西'],yAxisData: [{value: '230',num: {red: 20,yellow: 60,color: 'red'}},{value: '350',num: {red: 20,yellow: 60,color: 'red'}},{value: '660',num: {red: 20,yellow: 60,color: 'yellow'}},{value: '1200',num: {red: 20,yellow: 60,color: 'red'}},{value: '900',num: {red: 20,yellow: 60,color: 'yellow'}},{value: '500',num: {red: 20,yellow: 60,color: 'yellow'}},{value: '650',num: {red: 20,yellow: 60,color: 'red'}}],}
},
methods: {initEchart() {let chartDom = document.getElementById("echartDiv"+this.id);this.myChart = this.$echarts.init(chartDom);const customSeriesLength = 1;const colors = ['#5178ff', '#d14a82', '#26c1f2', '#a166ff', '#9C2BB6'];const barWidth = 0.2; // 柱条占比const barGap = 0.2; // 不同系列的柱间距离function renderItem(params, api) {const ceilHeight = 5; // 装饰的高度const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心const unitWidth = api.size([0, 1])[0];const height = api.size([0, api.value(1)])[1]; // 高度const width = unitWidth * barWidth; // 宽度const unitGapWidth = barGap * barWidth * unitWidth;const GapsWidth = (customSeriesLength - 1) * unitGapWidth;const showWidth = GapsWidth + width * customSeriesLength;const decorateIdx = parseInt(params.seriesName.split('_')[1]); // 绘制时的排序const xPosi =topCenter[0] - showWidth / 2 + decorateIdx * (width + unitGapWidth);return {type: 'rect', // 装饰shape: {x: xPosi,y: topCenter[1],width: width,height: height > ceilHeight ? ceilHeight : height,},style: api.style(),};}let series = [];for (let i = 0; i < customSeriesLength; i++) {const color = colors[i];series.push({name: 'basicRect_' + i,type: 'bar',barWidth: barWidth * 100 + '%',barGap: barGap * 100 + '%',data: this.yAxisData,itemStyle: {opacity: 0.5,color: color,},});series.push({name: 'decorateRect_' + i,type: 'custom',renderItem: renderItem,data: this.yAxisData,zlevel: 2,itemStyle: {color: color,},});}let option = {backgroundColor: 'transparent',grid: {top: 20,bottom: 20,left: '8%'},tooltip: {show: true,backgroundColor: 'transparent',padding: [10, 20, 10, 8],textStyle: {fontSize: 12,lineHeight: 24,color: '#000'},formatter: function(params, ticket, callback) {var htmlStr = '';var xName = params.name;htmlStr =  xNamereturn `<div class="tip-div"><div class="title"><span class="paiColor ${params.data.num.color}"></span>${htmlStr}</div><div class="num-div">红牌指标<span class="num" style="color: #FF6666;">${params.data.num.red}</span><span class="suffix">个</span></div><div class="num-div">黄牌指标<span class="num" style="color: #FEB11C;">${params.data.num.yellow}</span><span class="suffix">个</span></div></div>`}},xAxis: {type: 'category',data: this.xAxisData,axisLine: {show: true,lineStyle: {color: 'rgba(0,0,0,0.5)'},symbol: ['none', 'arrow'],symbolSize: [6, 20],symbolOffset: [0, 10],},axisTick: {show: false},axisLabel: {fontSize: 12,color: 'rgba(0,0,0,0.5)'},},yAxis: {type: 'value',axisLine: {show: false,},axisTick: {show: false},axisLabel: {fontSize: 12,color: 'rgba(0,0,0,0.5)'},splitLine: {lineStyle: {type: 'dashed'}}},series: series,};option && this.myChart.setOption(option);}
}