echart5.5.1版本，倒三角柱状图

陈皮太

于 2024-07-10 14:44:27 发布

阅读量55

点赞数

文章标签：前端 echarts

本文链接：https://blog.csdn.net/q1424966670/article/details/140323603

版权

加载方法

initChart1(title, id, tag) {
				var myChart = echarts5.init(this.$refs[id]);
				const _this = this;
				var option = {
					title:{
					      text: title||"",
					      show: title?true:false,
						  top: 24,
						  left: 24
					    },
					    grid:{
					      left: 54,
					      top: 74,
					      bottom: 44,
					      right: 30,
					    },
					xAxis: {
						type: 'category',
						data: ['用电量 (kWh)', '节电量 (kWh)']
					},
					color: ['#3465FA'],
					yAxis: {
						type: 'value'
					},
					series: [{
						type: 'pictorialBar',
						barWidth: 26,
						label: {
							show: true,
							position: 'top',
							fontSize: 14,
							fontWeight: 600,
							color: '#444444'
						},
						data: [{
								value: 50,
								name: "节电量",
								symbol: 'path://M525.873548 897.156129l-383.174193-761.723871 763.045161-1.981935-379.870968 763.705806z'
							},
							{
								value: 99,
								symbol: 'path://M525.873548 897.156129l-383.174193-761.723871 763.045161-1.981935-379.870968 763.705806z',
								itemStyle: {
									color: '#2FC587'
								}
							},
						],
					}]
				};
				myChart.setOption(option);
				if(tag){
					this.myChart = myChart;
				}
			}

宽度自适应

watch:{
	"$store.state.config.width"(){
		this.chartAutoWidth = this.$store.state.config.width-20*2-366-492-17-20-248;
		this.myChart.resize({
			width: this.chartAutoWidth
		});
	}
},