echarts常用配置项【持续更新】

  • A+
所属分类:Web前端
摘要

折线图,配置Y轴最小间隔为整数,刻度起始不会强制从0开始 设置Y轴分割线虚线

折线图,配置Y轴最小间隔为整数,刻度起始不会强制从0开始

    yAxis: {         minInterval: 1, // 整数         scale: true,  // y轴数据,根据数据的最大最小值进行计算     },        

 

设置Y轴分割线虚线

yAxis: {         type: 'value',         name: "Nitrogen dioxide(ppb)",         axisLine: {             show: true,             lineStyle: {                 color: 'black' //左侧显示线             }         },         splitLine: {             show: true,             lineStyle: {                 type: 'dashed',  // Y轴分割线 虚线,默认实线                 color: 'grey'             }         },         axisLabel: {             fontSize: 14         }     },

 

 

设置渐变色

https://gallery.echartsjs.com/editor.html?c=xtnmUAK2r

        color: {                  type: 'linear',                  x: 1,                  y: 0,                  x2: 0.5,                  y2: 1,                  colorStops: [{                      offset: 1,                      color: 'rgba(68, 145, 253, 0)'                  }, {                      offset: 0.5,                      color: 'rgba(68, 145, 253, .5)'                  }, {                      offset: 0,                      color: 'rgba(68, 145, 253, 1)'                  }],                  globalCoord: false               },    

 

 

 

 

symbolSize根据value值设置

      let symbolSizeMin = 50  //图表显示的size最小值       let symbolSizeMax = 150  //图表显示的size最大值        let valueMin = Math.min.apply(Math, this.v1)  //获取要显示的数组的最小值       let valueMax = Math.max.apply(Math, this.v1)  // 数组最大值              let symbolSizeRate = (symbolSizeMax - symbolSizeMin) / (valueMax - valueMin)       let symbolSizeMinD = symbolSizeMin - valueMin * symbolSizeRate        let seriesData = []       this.n1.forEach((item, index) => {         seriesData.push(           {             'name': item,             'value': this.v1[index],             x: index == 0 ? 500: 0,             y: index == 0 ? 50: 0,             'symbolSize': this.v1[index] * symbolSizeRate + symbolSizeMinD,  // 动态设置symbolSize             'draggable': true,             'itemStyle': {                 'normal': {                     'borderColor': colors[index % colors.length],                     'shadowColor': colors[index % colors.length],                     'color': colors[index % colors.length],                     'borderWidth': 4,                     'shadowBlur': 100,                 }             }           }         )       })       option['series'][0]['data'] = seriesData       console.log(series)        chart.setOption(option) 

  

 

参考:

https://echarts.apache.org/zh/option.html#yAxis.scale

术语速查手册

https://echarts.apache.org/zh/cheat-sheet.html

 

立体柱状图:

https://gallery.echartsjs.com/editor.html?c=x0ou4zifid

echarts常用配置项【持续更新】