echarts各类小技巧

小技巧"/>

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 属性