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

## 图例信息配置
legend: {x:'right', //x轴的位置 left center 55y:'center', //y轴位置 top bottom 55data:['人数'] ,//显示的名称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)

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

echart折线图信息配置及点击事件相关推荐

echart雷达图详细配置
echart雷达图参数配置我是个搬运工,这里是搬运别的大佬的.之前网上找了好久才找到的配置,怕下次难得找,直接搬过来了原链接:原链接 // 指定图表的配置项和数据 var option = {ba ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
echart折线图连线不显示问题总结
echart折线图,series动态数据不能有空数据,不然,只有数据点,而连线出不来.
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
Qt5基础背景图，绘图，点击事件
Qt5基础系列 Qt基础的学习笔记.此文章为在B站上学习黑马程序员Qt教程的绘图部分做的记录,加深理解,方便回看. 目录 Qt5基础系列一.简介二.绘图 1.头文件 2.引入api 3.相关参数定 ...
[vue+elementUI+echarts]echart折线图展示后台传来的数据
最近项目遇到了这个问题,来记录一下,方便以后复制粘贴23333 主要功能: 循环遍历渲染后台传来的一堆数据,然后点击每一条数据的More Info按钮展示对应的折线图表格数据. 引elementUi和 ...
echart折线图，柱状图，饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain ...
echart折线图小知识
1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 1 var selected = {}; 2 ...
echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy ...

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

echart折线图信息配置及点击事件相关推荐

最新文章

热门文章