echarts堆叠图,点击获取X轴Y轴数据。

option = { title: { text: '堆叠区域图' }, tooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'邮件营销', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[150, 232, 201, 154, 190, 330, 410] }, { name:'直接访问', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[320, 332, 301, 334, 390, 330, 320] }, { name:'搜索引擎', type:'line', stack: '总量', label: { normal: { show: true, position: 'top' } }, areaStyle: {normal: {}}, data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 使用刚指定的配置项和数据显示图表。

//获取点击事件

myChart.setOption(option); myChart.on('click', function (params) { alert("name:"+params.name+"value:"+params.value); });

转载于:https://www.cnblogs.com/hfj1/p/7803852.html

如果需要在 echarts 中实现时间堆叠柱状,其中 x 显示日期,y 显示时间,可以使用 echarts 中的时间组件和直角坐标系组件来实现。下面是一个示例代码,供参考: HTML 代码: ```html <div id="chart" style="height: 400px;"></div> ``` JavaScript 代码: ```javascript // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { // 时间组件 tooltip: {}, legend: { data: ['类别1', '类别2', '类别3'] }, xAxis: { type: 'time', splitLine: { show: false } }, yAxis: { type: 'value', splitLine: { show: false } }, // 堆叠柱状 series: [{ name: '类别1', type: 'bar', stack: '总量', data: [['2022-01-01', '08:00:00'], ['2022-01-02', '10:00:00'], ['2022-01-03', '12:00:00'], ['2022-01-04', '14:00:00'], ['2022-01-05', '16:00:00'], ['2022-01-06', '18:00:00']] }, { name: '类别2', type: 'bar', stack: '总量', data: [['2022-01-01', '06:00:00'], ['2022-01-02', '08:00:00'], ['2022-01-03', '10:00:00'], ['2022-01-04', '12:00:00'], ['2022-01-05', '14:00:00'], ['2022-01-06', '16:00:00']] }, { name: '类别3', type: 'bar', stack: '总量', data: [['2022-01-01', '04:00:00'], ['2022-01-02', '06:00:00'], ['2022-01-03', '08:00:00'], ['2022-01-04', '10:00:00'], ['2022-01-05', '12:00:00'], ['2022-01-06', '14:00:00']] }] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); ``` 在上面的代码中,xAxis 的 type 属性设置为 'time',表示 x 显示时间类型的数据。同时,堆叠柱状中的数据需要以二维数组的形式传入,第一个元素表示日期,第二个元素表示时间。如果需要自定义 x 和 y 的刻度,可以通过 xAxis 和 yAxis 中的 axisLabel 属性进行设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值