序

為了節(jié)省后續(xù)開發(fā)學(xué)習(xí)成本，這個系列將記錄我工作所用到的一些echarts圖表。

示例

水平柱狀圖如圖所示：

數(shù)據(jù)格式

data = [{'name': '于洪區(qū)','value': 2736},{'name': '新民市','value': 2844},{'name': '皇姑區(qū)','value': 2889},{'name': '沈河區(qū)','value': 3143}]

代碼

Vue版本以及腳本語言的選擇各有不同，核心內(nèi)容主要是option，重點關(guān)注該部分內(nèi)容即可。

<template><div class="chart" ref="horizontalBarRef"></div>
</template><script lang="ts">
import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator'
import echarts from 'echarts'@Component({name: 'HorizontalBar',components: {}
})
export default class HorizontalBar extends Vue {@Prop() data!: any@Prop({ default: () => ['rgba(72, 133, 201, 0.6)', 'rgba(72, 133, 201, 1)']}) colors?: any[]@Ref() horizontalBarRef!: any//此處監(jiān)聽是為了在有狀態(tài)切換時，例如時間年份或其他條件改變時，能夠讓Echarts圖表重新渲染@Watch('data')onDataChange() {this.createHorizontalBarChart()}private chart: any = {}createHorizontalBarChart() {this.chart = echarts.init(this.horizontalBarRef)const data = this.datalet names = []let values = []data.forEach(item => {names.push(item.name)values.push(item.value)})const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},confine: true,         //讓提示框恒定在網(wǎng)格容器內(nèi)，【針對顯示不全或者被遮蓋問題】},grid: {left: 20,right: 40,top: 0,bottom: 20,containLabel: true     //網(wǎng)格邊距包含坐標(biāo)標(biāo)簽},xAxis: {axisTick: {show: false          //是否顯示X軸坐標(biāo)刻度},axisLabel: {show: false		   //是否顯示X軸坐標(biāo)標(biāo)簽},axisLine: {show: false		   //是否顯示X軸軸線},splitLine: {lineStyle: {type: 'dashed'	   //以虛線形式展示X軸在網(wǎng)格中的分隔線}}},yAxis: {type: 'category',data: names,axisTick: {show: false,alignWithLabel: true    //刻度與坐標(biāo)標(biāo)簽對齊},axisLine: {show: true,lineStyle: {color: '#757790',     //設(shè)置Y軸軸線樣式width: 2}},axisLabel: {textStyle: {color: '#757790',	 //設(shè)置Y軸坐標(biāo)標(biāo)簽樣式fontSize: 14}},splitLine: {show: false			//是否展示Y軸方向上的分隔線}},series: [{type: 'bar',barWidth: 10,itemStyle: {color: {type: 'linear',			//設(shè)置柱狀條的漸變顏色x: 0,y: 0,x2: 1,y2: 0,colorStops: [{ offset: 0, color: this.colors[0] }, // 0% 處的顏色{ offset: 1, color: this.colors[1] } // 100% 處的顏色],global: false // 缺省為 false}},label: {show: true,				//展示柱狀條數(shù)值信息position: 'right',color: '#12121D',fontSize: 14},data: values}]}this.chart.setOption(option)}mounted() {this.createHorizontalBarChart()window.addEventListener('resize', this.chartResize)}beforeDestroy() {if (this.chart) {window.removeEventListener('resize', this.chartResize)this.chart.dispose()}}chartResize() {if (this.chart) {this.chart.resize()}}
}
</script>
<style lang="scss" scoped>
.chart {width: 100%;height: 300px;
}
</style>