ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- <script src="http://echarts.baidu.com/dist/echarts.min.js"></script> -->
<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
您选择了X轴的标签[<span id="xAxisTag"></span>],他的值为[<span id="barValue"></span>]
<input type="submit" name="" value="刷新" onclick="refreshBar()">
</br>
<div id="bar" style="width: 600px;height:400px;float:left;"></div> <div id="pie" style="width: 600px;height:400px;float:left;"></div> </body>
<script type="text/javascript"> function randGenerator(n, sum) {
//js生成n个和为固定sum的随机整数
//https://blog.csdn.net/smartcore/article/details/72934272 var aryRet = [];
var fSumTmp = sum;
var iAcc = 0;
for (var i = 0; i < (n -1); i++) {
var iTmp = Math.ceil(Math.random() * (fSumTmp / 2));
aryRet.push(iTmp);
fSumTmp -= iTmp;
iAcc += iTmp;
}
aryRet.push(sum-iAcc);
return aryRet;
} function getSeriesData(){ //根据js方法本身的加载顺序，此方法需要定义在myChart前面
//此处可以通过后台生成数据，这样后台就无需返回整个option，只需要返回动态的数据部分即可
// $.ajax({
// type: 'GET',
// url: "getSeriesData",
// cache: false,
// async : false,
// dataType: 'json',
// success: function (result) {
// seriesdata = result;
// },
// error: function (result, XMLHttpRequest, textStatus, errorThrown) {
// // 状态码
// // console.log(XMLHttpRequest.status);
// // console.log(XMLHttpRequest.toLocaleString());
// // 状态
// // console.log(XMLHttpRequest.readyState);
// // 错误信息
// // console.log(textStatus);
// }
// }); //var n1 = Math.floor(Math.random()*500+1);
//var n2 = Math.floor(Math.random()*500+1);
//var n3 = Math.floor(Math.random()*500+1);
//var n4 = Math.floor(Math.random()*500+1);
//var n5 = Math.floor(Math.random()*500+1);
//var n6 = Math.floor(Math.random()*500+1);
//seriesdata = [n1, n2, n3, n4, n5, n6]; seriesdata = randGenerator(6, Math.floor(Math.random()*500+1)); return seriesdata;
} function getxAxisData(){
//同样适用以ajax的方式从后台获取数据
xAxisData = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
return xAxisData;
} function getSaleOption(){
saleSeriesData = getSeriesData();
saleOption = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量',"趋势"]
},
xAxis: {
// data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
data : getxAxisData(),
triggerEvent:true,
axisTick: {
alignWithLabel: true //坐标值是否在刻度中间
} },
yAxis: {triggerEvent:true},
series: [{
name: '销量',
type: 'bar',
//data: [n1, n2, n3, n4, n5, n6],
//data : seriesdata,
//data : getSeriesData(),
data : saleSeriesData,
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];
//若返回的list长度不足，不足部分自动显示为最后一个颜色
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top'
}
}
}
},{
name: '趋势',
type: 'line',
//data: getSeriesData(),
data : saleSeriesData,
smooth:false, //是否为曲线,默认为false
itemStyle:{
normal:{
lineStyle:{
width:1, // 虚线的宽度
type:'dotted' //'dotted'虚线 'solid'实线
}
}
}
}]
}; return saleOption;
} function getSalePieOption(){
salePieOption = {
"legend":{
"orient":"vertical",
"left":"left"
},
"series":[
{
"data":[],
"center":[
"50%",
"60%"
],
//"name":"访问来源",
"itemStyle":{
"normal":{
"label":{
"formatter":"{b}\n{c}\n{d}%",
"show":true
}
},
"emphasis":{
"shadowOffsetX":0,
"shadowBlur":10,
"shadowColor":"rgba(0, 0, 0, 0.5)"
}
},
"radius":"55%",
"type":"pie"
}
],
"tooltip":{
"formatter":"{a} <br/>{b} : {c} ({d}%)",
"trigger":"item"
},
"title":{
//"subtext":"纯属虚构",
"x":"center",
"text":""
}
}; return salePieOption;
} function refreshPieData(name, value){ data = randGenerator(7,value);
salePieOption.title.text = name;
salePieOption.title.subtext = "销售额:"+value; salePieData =[
{
"name":"周一",
"value":data[0]
},
{
"name":"周二",
"value":data[1]
},
{
"name":"周三",
"value":data[2]
},
{
"name":"周四",
"value":data[3]
},
{
"name":"周五",
"value":data[4]
},
{
"name":"周六",
"value":data[5]
},
{
"name":"周日",
"value":data[6]
} ]
salePieOption.series[0].name = "销售比";
salePieOption.series[0].data = salePieData; } </script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myBarChart = echarts.init(document.getElementById('bar')); // 指定图表的配置项和数据
var option = getSaleOption();
// 使用刚指定的配置项和数据显示图表。
myBarChart.setOption(option); var myPieChart = echarts.init(document.getElementById('pie')); var salePieOption = getSalePieOption(); refreshPieData(option.xAxis.data[0], option.series[0].data[0]); myPieChart.setOption(salePieOption); myBarChart.on('click', function (params) {
//param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232
updatePage(option.xAxis.data[params.dataIndex],params.value); refreshPieData(option.xAxis.data[params.dataIndex],params.value); myPieChart.setOption(salePieOption);
});
</script> <script type="text/javascript">
function updatePage(tag, value){
var xAxisTag = $("#xAxisTag");
xAxisTag.html(tag);
var barValue = $("#barValue");
barValue.html(value);
}; function refreshBar(){ //局部刷新series内容
//此处没有用常用的刷新div等方法，而是直接改变了option的值，然后重新赋值给myChart //简化方法，调用getSeriesData更新数据。
//option.series.data = getSeriesData(); saleSeriesData = getSeriesData(); option.series[0].data = saleSeriesData;
option.series[1].data = saleSeriesData; myBarChart.setOption(option); //清空饼状图
//salePieOption.title.text = "";
//salePieOption.series[0].data = "";
//salePieOption.series[0].name = "";
//myPieChart.setOption(salePieOption); //刷新之后默认显示为柱状图的第一个对应的数据
refreshPieData(option.xAxis.data[0], option.series[0].data[0]);
myPieChart.setOption(salePieOption); }; </script>
</html>
显示效果：
ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动的更多相关文章
- canvas制作柱形图/折线图/饼状图，Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- swift app中展示折线图, 饼状图, 柱状图等数据图表
github 下载Charts-master SDK,该SDK有多种可自定义的图表样式 lineChart 正弦余弦线图 LineChart (cubic lines) LineChart (grad ...
- Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- 封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...
- 图表echarts折线图，柱状图，饼状图
总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...
- Java-jfree报表（学习整理）----饼状图、柱状图、折线统计图
1.使用的报表工具: jfree报表 2.下载网址: http://www.jfree.org/ 下载之后先解压:如下图 下载后:需要的jar包!如下图: 打开:找到以下的两个jar包 再导入开发项目 ...
- WPF、Silverlight项目中使用柱状图、饼状图、折线图
在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...
- 第三方Charts绘制图表四种形式:饼状图，雷达图，柱状图，直线图
对于第三方框架Charts(Swift版本,在OC项目中需要添加桥接头文件),首先要解决在项目中集成的问题,集成步骤: 一.下载Charts框架 下载地址:https://github.com/dan ...
随机推荐
- hdu 6199 gems gems gems dp
gems gems gems Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) P ...
- JaveWeb 公司项目（1）----- 使Div覆盖另一个Div完成切换效果
最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...
- FreeCodeCamp----Intermediate Algorithm Scripting解法
Finders Keepers 写一个 function,它浏览数组(第一个参数)并返回数组中第一个通过某种方法(第二个参数)验证的元素. 如果你被卡住了,记得开大招 Read-Search-Ask. ...
- Mybatis拦截器（一）
拦截器需要实现 interceptor接口 public interface Interceptor { //3 对目标对象拦截进行处理的内容 Object intercept(Invocation ...
- java io 好文传送
转自:白大虾 地址:https://www.cnblogs.com/baixl/p/4170599.html 主要内容 java.io.File类的使用 IO原理及流的分类 文件流 FileInput ...
- Qt532的QString输出各种编码的16进制数组（测试代码）
环境:Win7x64.Qt5.3.2 MSVC2010 OpenGL.vs2010 1.只测试了 4种:Utf8.Latin1.Local8Bit.unicode 2.测试代码:(这个是 " ...
- JNI手动释放内存（避免内存泄露）
. 哪些需要手动释放? 不要手动释放(基本类型): jint , jlong , jchar 需要手动释放(引用类型,数组家族): jstring,jobject ,jobjectArray,jint ...
- QT信号槽详解
1 QT信号槽详解 1.1 信号和槽的定义 信号是触发信号,例如按钮的点击触发一个clicked信号,槽是用来接收信号,并处理信号,相当于信号响应函数.一个信号可以关联多个槽函数,信 ...
- eclipse中怎么调出左边项目列表，解决方法：主界面的最上面一栏的Window--ShowView--Project Explorer
主界面的最上面一栏的Window--ShowView--Project Explorer
- 第 7 章 多主机管理 - 047 - 管理 Machine
管理 Machine Docker Machine 则很简单 docker-machine env host1 显示访问 host1 需要的所有环境变量: 根据提示,执行 eval $(docker- ...