小技巧"/>
echarts各类小技巧
echarts各类小技巧
- 背景颜色设置
backgroundColor: '',
- 图表大小设置
内部图表大小是与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 属性
更多推荐
echarts各类小技巧
发布评论