echart折线图信息配置及点击事件

## 图例信息配置
legend: {
        x:'right', //x轴的位置 left center 55
        y:'center', //y轴位置 top bottom 55
		data:['人数'] ,//显示的名称
		orient: 'horizontal',  //方向，横向和纵向
        icon: "rect", //图例样子 circle rect等
 },

整体位置设置

grid: {
        left: '25',
        right: '25',
        bottom: '24',
        top: '75',
        containLabel: true
    },

横纵坐标轴颜色设置

axisLine: {
   lineStyle: {
      type: 'solid',
      color: '#EEEEF1',//左边线的颜色
      width:'1'//坐标线的宽度
   }
}

坐标轴字体颜色及大小

axisLabel: {
      color: '#999',
      textStyle: {
          fontSize: 12
      },
  },

横纵坐标网格线

splitLine: {
   lineStyle: {
      color: "#EEEEF1"
   }
},

设置数据

//需要几条线就加几个数据
 series: [{
            name: '订单总笔数',
            type: 'line',
            smooth: true,
            data: [13,1,4,44,45,322,76]
        },
        {
            name: '钱包笔数',
            type: 'line',
            smooth: true,
            data: [13,54,34,344,35,53]
        },
        {
            name: '借呗笔数',
            type: 'line',
            smooth: true,
            data: [13,2,2,32,123,23,136]
        }
    ]

添加点击事件

//引入
import echarts from 'echarts'
//设置option
let option ={...}

let line = echarts.init(document.getElemnetById('id'))
line.on('click',(params)=>{
console.log(params)
})
line.setOption(option)

如果对您有用，请帮我点个赞，鼓励一下呗