echarts各类小技巧

echarts各类小技巧

---

1. 背景颜色设置

backgroundColor: '',

---

1. 图表大小设置

内部图表大小是与div容器大小相关的，如果想调整图表大小，调整div就可以了

如果是想调整图表与div间上下左右留白，则设置grid属性就可以了

            grid:{
                    x:25,
                    y:45,
                    x2:5,
                    y2:20,
                    borderWidth:1
                },

---

• 2.显示设置

   series: [
            {
               label: {
                        formatter: '{b}: {c} \n ({d}%)',  // 显示百分比
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
}
]

---

• 3.Echarts-基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

大致划分两大类，有轴的和无轴的

• series:系列列表。每个系列通过 type 决定自己的图表类型，即：图标数据，指定什么类型的图标，可以多个图表重叠。

• xAxis：直角坐标系 grid 中的 x 轴

• yAxis：直角坐标系 grid 中的 y 轴【Y依赖数据显示】

• grid：直角坐标系内绘图网格

• title：标题组件

• tooltip：提示框组件【鼠标放上显示】

• legend：图例组件【需要数据有name属性】

• color：调色盘颜色列表【数组传递】

---

• 4.一张图多个图例

var option ={
		// title:{
		// 	text:'echarts demo'
		// },
		tooltip:{},
		color:['#4472C5','#ED7C30','#80FF80'],
		// legend:{
		// 	data:['销量','销量1','销量2'],	
		// 	icon: "circle",   //  设置形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
		// 	itemWidth: 10,  // 设置宽度
		// 	itemHeight: 10, // 设置高度
		// 	itemGap: 20 // 设置间距
		// },
		xAxis:{
			data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
		},
		yAxis:{	},
		series:[{
			name:'销量',
			type:'bar',
			data:[5, 20, 36, 10, 10, 20]
		},{
			name:'销量1',
			type:'line',
			data:[15, 20, 36, 10, 10, 20]	
		},{
			name:'销量2',
			type:'bar',
			data:[20, 20, 36, 10, 10, 20]	
		}]
	};

 <div id="myChartAge" :style="{width: '400px', height: '400px'}"></div>

let myChart = this.$echarts.init(document.getElementById('myChartAge'))
// 绘制图表
myChart.setOption(option)

---

• 5.图例切换

---

• 6.添加数据

---

• 组件的移动

每个组件都有：left right top bottom 属性