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 ...
随机推荐
- tomcat中配置https请求
一. 创建tomcat证书 这里使用JDK自带的keytool工具来生成证书: 1. 在jdk的安装目录\bin\keytool.exe下打开keytool.exe 2. 在命令行中输入以下命令: ...
- [转载]undefined reference to `memcpy@GLIBC_2.14'
转自:http://blog.sina.com.cn/s/blog_6c5a47d30102wfw9.html undefined reference to `memcpy@GLIBC_2.14' ( ...
- HDU 3526 Computer Assembling（最小割）
http://acm.hdu.edu.cn/showproblem.php?pid=3526 题意:有个屌丝要配置电脑,现在有n个配件需要购买,有两家公司出售这n个配件,还有m个条件是如果配件x和配件 ...
- 抗性基因数据库CARD介绍
随着抗生素药物的发现及使用,越来越多的耐药菌株由此产生.而耐药菌株的发展则会增加疾病治疗的难度和成本,因此耐药微生物的研究则显得尤为重要.目前,通过对耐药基因的鉴定挖掘能够一定程度上帮助我们揭开耐药机 ...
- Could not find com.android.tools.build:aapt2:3.2.1-4818971.
Could not find com.android.tools.build:aapt2:-. Searched in the following locations: file:/H:/Androi ...
- Python self,init,对象属性
self关键字的作用 __init__初始化 # coding=utf-8 支持中文 class Human(object): laugh = 'Ha' def show_laugh(self): p ...
- sass、less是什么，如何使用？
一个很好的介绍的SASS,LESS的区别的文档,值get 1.背景介绍 CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩 展,不利于复用 ...
- php 建站 多域名配置 自定义重定向
1. 申请一个域名 , 当多个域名使用. 比如 申请一个顶级域名为 .com 后缀的一级域名 :mine.com, 一般允许绑定四五个二级域名,比如 www.mine.com . mine.mine ...
- 异常上报工具：腾讯Bugly
1.腾讯出了一个和umeng差不多的异常上报工具Bugly.(传送门:https://bugly.qq.com/docs/) (1)两者比较明显的区别是,Bugly能比较实时上报异常信息,经过测试基本 ...
- 第 8 章 容器网络 - 054 - 准备 macvlan 环境
准备 macvlan 环境 macvlan 本身是 linux kernel 模块,其功能是允许在同一个物理网卡上配置多个 MAC 地址,即多个 interface,每个 interface 可以配置 ...