echarts常用的设置

230 阅读1分钟

最近在学习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();    }  },