Echarts在线免费图表

 
            option = {
	//你的代码
	backgroundColor: '#24549F',
	grid: [
		{
			//左侧的柱状图grid
			left: '8%',
			top: '8%',
			right: '14%',
			bottom: '5%'
		}
	],
	xAxis: [
		{
			//左侧柱状图的X轴
			gridIndex: 0,//x 轴所在的 grid 的索引
			show: false
		}],
	yAxis: [
		{
			//左侧柱状图的Y轴
			gridIndex: 0,//y轴所在的 grid 的索引
			splitLine: 'none',
			axisTick: 'none',
			axisLine: 'none',
			axisLabel: {
				verticalAlign: 'bottom',
				align: 'left',
				padding: [50, 0, 18, 10],
				textStyle: {
					color: '#fff',
					fontSize: '12',
				}
			},
			data: ['科技专家(科技界、产业界、经济界）'],
			inverse: true,
		},
		{
			//左侧柱状图的Y轴
			type: 'category',
			gridIndex: 0,//y轴所在的 grid 的索引
			splitLine: 'none',
			axisTick: 'none',
			axisLine: 'none',
			data: [60],
			inverse: true,
			axisLabel: {
				show: true,
				// verticalAlign: 'bottom',
				align: 'right',
				padding: [0, -25, 0, 20],
				textStyle: {
					color: '#fff',
					fontSize: '14',
				},
				formatter: function (value) {
					return '{x|' + value + '} {y|' + '人' + "}"
				},
				rich: {
					y: {
						color: '#fff',
						fontSize: 10
					},
					x: {
						color: '#f6cf42',
						fontSize: 14
					}
				}
			}
		},
		{
			//左侧柱状图的Y轴
			gridIndex: 0,//y轴所在的 grid 的索引
			splitLine: 'none',
			axisTick: 'none',
			axisLine: 'none',
			data: []
		}
	],
	series: [
		{
			name: '科技界',
			type: 'bar',
			stack: 'all',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [20],
			barWidth: 14,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: "#29A1E6" // 0% 处的颜色
					}, {
						offset: 1,
						color: "#29A1E6" // 100% 处的颜色
					}], false),
					barBorderRadius: 3,
				}
			},
			z: 2
		},
		{
			name: '产业界',
			type: 'bar',
			stack: 'all',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [20],
			barWidth: 14,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: "#04B0BE" // 0% 处的颜色
					}, {
						offset: 1,
						color: "#04B0BE" // 100% 处的颜色
					}], false),
					barBorderRadius: 3,
				}
			},
			z: 2
		},
		{
			name: '经济界',
			type: 'bar',
			stack: 'all',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [20],
			barWidth: 14,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: "#9DE629" // 0% 处的颜色
					}, {
						offset: 1,
						color: "#9DE629" // 100% 处的颜色
					}], false),
					barBorderRadius: 3,
				}
			},
			z: 2
		},
		{
			name: '外框',
			type: 'bar',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 2,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			barGap: '-100%',
			data: [100],
			barWidth: 15,
			itemStyle: {
				normal: {
					color: '#D9E5F6',
					borderWidth: 1,
					borderColor: '#D9E5F6',
					barBorderRadius: 3,
				},
			},
			z: 0
		}
	]
};