echarts折线图和柱状图细节

折线图问题总结

1. stack: 'total'

 total代表折线图堆叠（第二条线的数值=本身的数值+第一条线的数值，第三条的数值=第二条线图上的数值+本身的数值，以此类推......）显示

 

修改值或者直接删除这个属性 即可使折线相同值重合 如下图

 

 

2. 折线图提示框自定义

 tooltip: {

          trigger: 'axis', // 图形属于哪一类，比如折线图的标识是 'axis'，饼状图是bar

          formatter: function(params) {

            let result = `<div>${params[0].axisValue}</div>`

            params.forEach((item, index) => {

              result += `<div style="display: flex"><div style="width: 11px; height: 11px; border-radius: 100%; margin-right: 6px; margin-top: 5px; background: ${item.color}"></div><div style="min-width: 100px">${item.seriesName}</div><div>${item.value}%</div></div>`

            })

            return result

          }

        },

效果如图

 

3. legend: 这个其实就是有几条折线的类目

4. xAxis:  x是横轴，是横轴上都有哪些数据

 yAxis:  y是纵轴，是纵轴上有哪些数据，这里用value，会自动计算你的数据的宽度 然后自行安排最大值，最小值，每一格代表多少值

5. symbol: 'none', // 拐点图类型 none则拐点不存在

6. smooth: false // 折线弧度 设置当前的折线是否为平滑折线

7. trigger: 'axis', // 图形属于哪一类，比如折线图的标识是 'axis'，饼状图是bar

8.axisLine: {

                show: true, // x轴或y轴的显示

                lineStyle: {

                    color: '#979797' // 轴的颜色

                }

 },

9. splitLine: {

              show: true,

              lineStyle: {

                type: 'dashed' // 内部轴虚线样式

              }

            }

10. axisLabel: {

              margin: 26 // 轴和类目文字之间的间距

            }如图

 

柱状图总结

1. 柱状图实现双y轴后，左侧柱状使用左侧y轴，右侧柱状使用右侧y轴

series中通过字段yAxisIndex来指定应用哪个y轴，计数从0开始