记录echarts 柱状图 y轴顶部设置横杠 柱状图渐变 柱状图Y轴渐变

先看看效果图, 如果是你的菜, 请麻烦继续往下看, 谢谢!

如有图片丢失, 请联系博主留言 谢谢.

然后我们先装一下echarts

npm install echarts --save // 我这边的版本是"echarts": "^5.3.3",

然后在对应的vue页面中script添加

<script>
import * as echarts from "echarts";
</script>

代码我直接帖上来吧, 同学慢慢研究! 也给自己记录一下!

export default {
    name:'',
    data(){
        return{
          	dataOption: {
				backgroundColor: 'transparent',
				tooltip: {
					show: false,
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				grid: {
					top: '15%',
					right: '10%',
					left: '15%',
					bottom: '10%',
				},
				xAxis: [
					{
						type: 'category',
						data:  ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
						axisLine: {
							lineStyle: {
								color: 'rgba(66, 192, 255, .3)',
							},
						},
						axisLabel: {
							interval: 0,
							margin: 10,
							color: '#05D5FF',
							fontSize: 11,
						},
						axisTick: {//刻度
							show: false,
						},
					},
				],
				yAxis: [
					{
						show: false,
						axisLabel: {
							padding: [3, 0, 0, 0],
							formatter: '{value}',
							color: 'rgba(95, 187, 235, 1)',
							fontSize: 11,
						},
						axisTick: {
							show: true,
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(66, 192, 255, .3)',
							},
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(255,255,255,0)',
							},
						},
					},
					{
						position: 'left',
						axisLabel: {
							padding: [3, 0, 0, 0],
							formatter: '{value}',
							color: 'rgba(95, 187, 235, 1)',
							fontSize: 11,
						},
						data: [10, 55, 26, 86, 63, 26, 89, 52, 35, 12, 37, 86],
						axisTick: {
							show: true,
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(66, 192, 255, .3)',
							},
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(255,255,255,0)',
							},
						},
					},
				],
				series: [
					{	//柱状图渐变颜色
						type: 'bar',
						data: [10, 55, 26, 86, 63, 26, 89, 52, 35, 12, 37, 86],
						barWidth: '10',
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
								{
									offset: 0,
									color: 'rgba(254,69,7, 1)', // 0% 处的颜色
								},
								{
									offset: 0.18,
									color: 'rgba(100,90,255, 1)', // 100% 处的颜色
								},
								{
									offset: 0.44,
									color: 'rgba(72,133,250, 1)', // 100% 处的颜色
								},
								{
									offset: 1,
									color: 'rgba(64, 131, 252, 0)', // 100% 处的颜色
								},
								],
								false
							),
							shadowColor: 'rgba(5, 213, 255, 1)',
							shadowBlur: 4,
						},
						label: {
							show: true,
							lineHeight: 10,
							formatter: '{c}',
							position: 'top',
							color: '#fff',
							fontSize: 10,
						},
					},
					{		//顶部的白色横杠
						type: 'pictorialBar',
						symbol: 'rect',
						symbolSize: [10, 2],
						symbolOffset: [0, -3],
						symbolPosition: 'end',
						data: [10, 55, 26, 86, 63, 26, 89, 52, 35, 12, 37, 86],
						itemStyle: {
							color: '#FFFFFF',
						},
					},
				],
			},

        }
    },
    methods: {
      init(){
        var myChart = echarts.init(document.getElementById('chart'));
        myChart.setOption(this.dataOption)
      }

    },
    mounted() {
      this.init()
	}
}

如果能帮助到你的, 麻烦点个赞 . 谢谢!

学到的就要教人，赚到的就要给人。