echarts设置柱状图柱状图粗细大小

主要属性：　 //设置柱状图大小barWidth: 20,demo:<!DOCTYPE html><html><head><meta charset="utf-8"><title>柱状图大小</title><scr...

祈澈菇凉

38404人浏览 · 2019-09-09 15:22:15

祈澈菇凉 · 2019-09-09 15:22:15 发布

主要属性：

　 //设置柱状图大小
					barWidth: 20,

demo:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>柱状图大小</title>
		<!-- 引入 echarts.js -->
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			// 指定图表的配置项和数据
			myChart.setOption({
				title: {
					text: '柱状图'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					　 //设置柱状图大小
					barWidth: 20,
					//设置柱状图渐变颜色
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: "#1268f3" // 0% 处的颜色
							}, {
								offset: 0.6,
								color: "#08a4fa" // 60% 处的颜色
							}, {
								offset: 1,
								color: "#01ccfe" // 100% 处的颜色
							}], false)
						}
					},
					data: ["1", "2", "3", "4", "5", "2", "3", "4", "3"]
				}]
			});
		</script>
	</body>

</html>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport