最近在学习ehcarts的使用,echarts的设置选项非常多,基本是对着官网学的,推荐以及列举一些常见的echarts常用的api。
1.柱状图中的柱的圆角
itemStyle:{
barBorderRadius:[50,50,0,0]
}
设置顺序与 margin同
2.数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
series-bar. stack
3.线状图的弧度
smooth: true //弧度
4.坐标两侧留白
boundaryGap: false//坐标轴两边留白策略
等等,我的echarts是在vue中使用的
一般都是直接在mounted中创建
mounted() { const chartDom = document.querySelector('.total-id-char'); const chart = this.$echarts.init(chartDom); chart.setOption({ xAxis: { type: 'category', show: false, boundaryGap: false//坐标轴两边留白策略 }, yAxis: { show: false }, series: [{ type: 'line', data: [620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220, 620], areaStyle: { color: 'purple' }, lineStyle: {//图形上方的线 width: 0 }, itemStyle: {//图形上方的点 opacity: 0 }, smooth: true //弧度 }], grid: {//位置 top: 0, left: 0, right: 0, bottom: 0 } }) },
其中比较常用的方法 window自适应
window.onresize = () => { this.chart1.resize(); } },