Echarts在线免费图表

 
            let list = [
      {name:"2022年",value:0},
      {name:"2023年",value:27528},
      {name:"2024年",value:2948}
]
option = {
	backgroundColor: '#000',
	grid: {
		left: '12%',
		top: '10%',
		bottom: '10%',
		right: '10%',
	},
	xAxis: {
		// name: 'X',
		nameTextStyle: {
			color: '#fff',
			padding: [0, 0, 0, 20],
		},
		show: true,
		axisLine: {
			show: true,
			lineStyle: {
				color: '#fff',
				shadowColor: 'rgba(117, 168, 202, 0.3)',
				shadowOffsetX: '20',
			},
			symbol: ['none', 'arrow'],
			symbolOffset: [0, 25],
		},
		splitLine: {
			show: false,
			lineStyle: {
				color: 'rgba(117, 168, 202, 0.3)',
			},
		},
		axisLabel: {
			show: true,
			textStyle: {
				fontSize: 14,
				fontWeight: 600,
				color: '#fff',
			},
		},
		axisTick: {
			show: false,
		},
		data: list.map(val => {
			return val.name
		})
	},
	yAxis: [{
		name:'销量(万元)',
		nameTextStyle: {
			color: '#fff',
			padding: [0, 0, 0, 20],
		},
		max: 35000,
		min: 0,
		splitNumber: (123 % 5).toFixed(0),
		show: true,
		axisTick: {
			show: false,
		},
		axisLine: {
			show: true,
			symbol: ['none', 'arrow'],
			symbolOffset: [0, 15],
			lineStyle: {
				// color: 'rgba(255, 129, 109, 0.1)',
				width: 1, //这里是为了突出显示加上的
				color: '#fff',
				shadowColor: '#fff',
			},
		},
		axisLabel: {
			show: true,
			textStyle: {
				fontSize: 12,
				// fontFamily: PangMenZhengDao,
				fontWeight: 600,
				color: '#fff'
			},
		},
		splitArea: {
			areaStyle: {
				color: '#fff',
			},
		},
		splitLine: {
            show: true,
            lineStyle: {
               color: 'rgba(117, 168, 202, 0.3)',
               type: 'dashed'
            }
         },
	}],
	series: [{
		type: 'pictorialBar',
		barCategoryGap: '-20%',
		/*多个并排柱子设置柱子之间的间距*/
		// symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
		symbol: 'path://M0,10 L10,10 C5.5,10 6.5,5 5,5 C3.5,5 4.5,10 0,10 z',
		label: {
			show: true,
			position: 'top',
			distance: 10,
			color: '#fff',
			fontWeight: 'bolder',
			fontSize: 12,
		},
		itemStyle: {
			normal: {
				color: params => {
					const colorList = [{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: '#297ff2',
								},
								{
									offset: 1,
									color: '#cce7fc',
								},
							]
						},
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: '#3bfafe',
								},
								{
									offset: 1,
									color: '#aaf4fe',
								},
							]
						},
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: '#e08440',
								},
								{
									offset: 1,
									color: '#decabd',
								},
							]
						}
					];
					return colorList[params.dataIndex];
				},
				opacity: 0.7
			},
			// 鼠标移入柱子上 透明度变为 1
			emphasis: {
				opacity: 1,
			},
		},
		data: list.map(v => {
			return v.value
		})
		// data: [123, 60, 25]
	}, ],
};