- A+
所属分类:Web前端
折线图,配置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