vue 使用echarts的方法（柱状图）

最新推荐文章于 2024-08-01 13:59:50 发布

weixin_46412709

最新推荐文章于 2024-08-01 13:59:50 发布

阅读量245

点赞数

本文链接：https://blog.csdn.net/weixin_46412709/article/details/107932012

版权

链接: 使用echarts方法.

横向柱状图 更改X轴和Y轴的信息
 xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: [{
        type: 'category',
        inverse: true,
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff'
            },
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        data: ['大米', '玉米', '蔬菜', '鸡蛋', '坚果']
    }
series[{
	设置最大值和最小值 markPoint {data:[{type:'max',name:'最大值'}，{type:'min',name:'最小值'}]}
	设置平均值 markLine {data:[type:'average',name:'平均值']}
	数据显示 laber {
		show: true,
		rotate: 60 // 旋转
		position: 'top' // 内容显示的位置
	},
	 itemStyle:{ // 内容样式
                normal: {
                    color: '#fff',
                    barBorderRadius: [20, 20, 20, 20],
                }
            },
	设置柱宽度 barwidth:'30%'
}]