柱状折线图2-双柱状重合堆积折线-重写图例点击事件

本例子：

　　使用了formatter方法重写了提示层的展示数据

　　使用了双x轴实现重合

　　使用了stack实现堆积

　　使用了legendselectchanged和dispatchAction重写了图例点击事件

　　使用bar和line在一个图里就可实现柱状折线图

　　事件：传送门1 传送门2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="echarts.min.js"></script>
</head>
<body><div id="main" style="width: 900px;height:400px;"></div><button id="btn">clcik</button><script>
let num = 0;/*toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},*/var option = {tooltip : {trigger: 'axis',formatter:function(params,b,c){var reVal = params[0].name + "<br/>";params.forEach(function(v){reVal += v.marker + v.seriesName + ":" + v.value +"<br/>";});return reVal;}},grid:{x: 50,x2: 100},calculable : true,legend: {selectedMode:"multiple",data:["总水量",'蒸发量','降水量',"总水量2",'蒸发量2','降水量2','平均温度','平均温度2']},xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']},{show : false,type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis : [{boundaryGap:[0,'10%'],position:"left",type : 'value',name : '水量',splitLine:{show:false},axisLabel : {formatter: '{value} ml'},axisTick:{inside:true}},{boundaryGap:[0,'10%'],position:"right",offset:0,type : 'value',name : '温度',splitLine:{show:false},axisLabel : {formatter: '{value} °C'}},{boundaryGap:[0,'10%'],position:"right",offset:50,type: 'value',name : '温度2',splitLine:{show:false},axisLabel:{formatter: '{value} °C'}}],series : [{name:'总水量',type:'bar',/*barGap -100%  就可以当成背景  可以使用在堆积柱状图里的总数里*//*barGap:"-100%",*/yAxisIndex: 0,xAxisIndex: 1,data:[4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 231.2, 344.4, 81.3, 48.8, 12.4, 5.6]},{name:'蒸发量',type:'bar',stack:"总水量",yAxisIndex: 0,xAxisIndex: 0,data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 130.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'降水量',type:'bar',stack:"总水量",yAxisIndex: 0,xAxisIndex: 0,data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 100.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name:'总水量2',type:'bar',/*barGap -100%  就可以当成背景  可以使用在堆积柱状图里的总数里*//*barGap:"-100%",*/yAxisIndex: 0,xAxisIndex: 1,data:[4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 241.2, 344.4, 81.3, 48.8, 12.4, 5.6]},{name:'蒸发量2',type:'bar',stack:"总水量2",yAxisIndex: 0,xAxisIndex: 0,data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'降水量2',type:'bar',stack:"总水量2",yAxisIndex: 0,xAxisIndex: 0,data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 105.6, 182.2, 48.7, 18.8, 6.0, 2.3]},/*{name:'平均温度',type:'line',yAxisIndex: 1,data:[2.0, 3.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 25.0, 16.5, 10.0, 9.2]},,{name:'平均温度2',type:'line',yAxisIndex: 2,data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}
*/    ]
};var option2 = {tooltip : {trigger: 'axis'},grid:{x: 0,x2: 150},calculable : true,legend: {data:['降水量','平均温度']},xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis : [{boundaryGap:[0,'10%'],position:"right",offset:0,type : 'value',name : '水量',splitLine:{show:false},axisLabel : {formatter: '{value} ml'},axisTick:{inside:true}},{boundaryGap:[0,'10%'],position:"right",offset:50,type : 'value',name : '温度',splitLine:{show:false},axisLabel : {formatter: '{value} °C'}}],series : [{name:'降水量',type:'bar',yAxisIndex: 0,data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name:'平均温度',type:'line',yAxisIndex: 1,data:[2.0, 3.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 25.0, 16.5, 10.0, 9.2]}]
};// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true); var offOn=true;
document.querySelector("#btn").onclick=function(){if(offOn){myChart.setOption(option2,true); }else{myChart.setOption(option,true); }offOn=!offOn;}

/*echarts 可以在选中图例后进行一些操作， 使用dispatchAction 触发图形里的一些方法，比如图例的legendSelect选中事件batch 是批发对象API链接：http://echarts.baidu.com/api.html#echartsInstance.dispatchAction这样就可以覆盖某些本有方法，比如点击图例切换选中事件，本例子就取消了legendSelect是选中，把图例选中
*/

var triggerAction = function(action, selected) {legend = [];for ( name in selected) {if (selected.hasOwnProperty(name)) {legend.push({name: name});}}myChart.dispatchAction({type: action,batch: legend});};
myChart.on('legendselectchanged', function(obj) {var selected = obj.selected;var legend = obj.name;// 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行// 使得 无 selected 对象if (selected != undefined) {triggerAction('legendSelect', selected);}});</script>
</body>
</html>

转载于:https://www.cnblogs.com/zhangzhicheng/p/7906659.html

柱状折线图2-双柱状重合堆积折线-重写图例点击事件相关推荐

jfreechart折线图+柱状图、柱状图(堆叠)+折线图、饼状图、环形图
记录jfreechart生成图片测试程,主要是为自己研究过之后的记录:) 折线图+柱状图柱状图(堆叠)+折线图获取饼状图获取环形图 jar包下载地址:https://download.csdn. ...
Plotly.js使用详细介绍（折线图、饼状图、点图、水平条形图、桑基图、树状图、等值线图）
目录 0 写在前面 1 HTML代码 2 折线图 2.1 基本折线图 2.2 复杂折线图 2.2.1 轨迹 2.2.2 布局 3 饼状图 3.1 基本饼状图 3.2 饼图子图 3.3 甜甜圈图 4 点 ...
Web在jsp页面中生成柱状图，折线图，饼状图
一.前言在实际开发过程中,柱状图,折线图,饼状图在一些OA,ERP中是非常常见的功能,特别是需求方是业务型,数据分析型公司,下面的例子简单实现了饼状图,柱状图,折线图在jsp中生成.(ps:新手上路 ...
使用POI实现读取Excel数据并生成柱状图、折线图、饼状图的工具类
最近有一个需求是要通过程序自动根据excel中的数据来动态生成相应的图表.其中就有柱状图,折线图,饼状图.但是没想到用wps生成非常的简单,一点就可以生成,使用POI生成的过程非常的难受.不得不将这次 ...
Java后台生成图表——主代码（折线图，饼状图，柱状图，-》并产出图片PDF或其他格式的图片内容）
声明: 本文采用的数据均来源于网络,本人只用于学习记录,若有侵权,还望能及时联系. Maven 的 POM 依赖 <!--用于jfreechart生成图片 --&g ...
Frappe Chart ——折线图和饼状图
Frappe Chart --折线图和饼状图学习 1.请使用互联网上的图形工具(推荐: Frappe Chart)与以下中国历年GDP数据与世界主要各国军费预算.分别产生 Line chart与Pi ...
Android 开发第三方框架制作条形图、折线图、饼状图、水平条形图
Android 第三方框架MPAndroidChart-v3.1.0的简单使用这里写目录标题 Android 第三方框架MPAndroidChart-v3.1.0的简单使用前言引入库布局初始 ...
java生成折线图，饼状图，柱形图
需要的jar包: jfreechart-1.0.13.jar jcommon-1.0.14.jar package com.viathink.lims.util;import java.awt.Col ...
echats实现进度条、饼状图、折线图、柱状图、柱状图和折线图的集合体
记录工作中用到的一些echats图标 1.进度条有两种方式: a.通过elemnt-ui组件el-progress组件实现上面的进度条光使用el-progress无法实现,el-progress不 ...

柱状折线图2-双柱状重合堆积折线-重写图例点击事件

柱状折线图2-双柱状重合堆积折线-重写图例点击事件相关推荐

最新文章

热门文章