Echarts在线免费图表

 
            let list = [
      {name:"城东",value:88},
      {name:"横峰",value:75},
      {name:"城西",value:66}
]
option = {
	backgroundColor: '#dbf1fd',
	title: {
		text: '案件分布',
		textStyle: {
			color: '#000',
			fontSize: 25
		},
		top:"10%",
		left: 'center',
// 		right: '5%'
	},
	grid: {
		left: '12%',
		top: '25%',
		bottom: '30%',
		right: '10%',
	},
	xAxis: {
		// name: 'X',
		nameTextStyle: {
			color: '#333333',
			padding: [0, 0, 0, 20],
		},
		show: true,
		axisLine: {
			show: true,
			lineStyle: {
				color: '#7bb4dc',
				shadowColor: 'rgba(91,100,134,1)',
				shadowOffsetX: '20',
			},
			symbol: ['none', 'arrow'],
			symbolOffset: [0, 25],
		},
		splitLine: {
			show: false,
			lineStyle: {
				color: 'rgba(255,255,255,0.2)',
			},
		},
		axisLabel: {
			show: true,
			// rotate: -1,
			textStyle: {
				fontSize: 14,
				// fontFamily: PangMenZhengDao,
				fontWeight: 600,
				color: '#000',
			},
		},
		axisTick: {
			show: false,
		},
// 		data: ['物业纠纷', '其他合同', '道路交通']
		data: list.map(val => {
			return val.name
		})
	},
	yAxis: [{
		nameTextStyle: {
			color: '#333333',
			padding: [0, 0, 0, 20],
		},
		max: 123,
		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: '#7bb4dc',
				shadowColor: 'rgba(91,100,134,1)',
			},
		},
		axisLabel: {
			show: true,
			textStyle: {
				fontSize: 12,
				// fontFamily: PangMenZhengDao,
				fontWeight: 600,
				color: '#000'
			},
		},
		splitArea: {
			areaStyle: {
				color: 'rgba(255,255,255,.5)',
			},
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: '#cfe9f9',
				width: 1,
				type: 'solid',
			},
		}
	}],
	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: '#000',
			fontWeight: 'bolder',
			fontSize: 12,
		},
		itemStyle: {
			// normal: {
			//   color: {
			//     type: 'linear',
			//     x: 0,
			//     y: 0,
			//     x2: 0,
			//     y2: 1,
			//     colorStops: [
			//       {
			//         offset: 0,
			//         color: '#3b89f4',
			//       },
			//       {
			//         offset: 1,
			//         color: '#cce7fc',
			//       },
			//     ],
			//     global: false, //  缺省为  false
			//   },
			// },
			// emphasis: {
			//   opacity: 1,
			// },
			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]
	}, ],
};




myChart.getZr().on('click', params => { 
	console.log(params)
	if(params.topTarget){
		alert(params.topTarget.style.text)
	}
})