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 5242 Game（贪心）
http://acm.hdu.edu.cn/showproblem.php?pid=5242 题意: 给出一棵树,每个节点都有一个权值,每次可以获得从根结点(1)到叶子节点上的所有权值和,每个节点只能 ...
- HDU 6249 Alice’s Stamps（dp）
http://acm.hdu.edu.cn/showproblem.php?pid=6249 题意: 给出n个区间,求选k个区间的最大区间并. 思路: 可能存在左端点相同的多个区间,那么此时我们肯定选 ...
- Codeforces 85 D. Sum of Medians
题目链接:http://codeforces.com/contest/85/problem/D 做法果然男默女泪啊..... 大概就是直接开了一个$vector$每次插入删除都用自带的$insert$ ...
- win10 下载安装eclipse
官网:https://www.eclipse.org 选择下载包 选择下载win 64版本 解压后目录结构如下: 点击运行eclipse
- 3. 使用vue-cli创建项目
eslint: 用来做项目编码规范检查的工具基本原理: 定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息有相应的配置, 可定制检查 1. 创建项目 vue脚手架(vue-cl ...
- windows与linux换行符
我一次linux上写的脚本,利用vim进行脚本编写,然后下载下来在nodepad++上面打开,在nodepad上面新建了一个文件将原来文件内容复制过去,保存后下载复制文件在linux上面进行运行,发现 ...
- vue-cli中理不清的assetsSubDirectory 和 assetsPublicPath
背景 一般情况下,我们借用 vue-cli之力安装好所有依赖后,我们就可以愉快的板砖了.但是也经常会遇到一写问题,比如assetsSubDirectory 和 assetsPublicPath两个兄弟 ...
- Python 数字(Number)
Python 数字(Number) Python 数字数据类型用于存储数值. 数据类型是不允许改变的,这就意味着如果改变数字数据类型的值,将重新分配内存空间. 以下实例在变量赋值时 Number 对象 ...
- 在dos输入pybot显示不是内部命令，或者显示chromedriver.exe要加入到path中？
在dos输入pybot显示不是内部命令,或者显示chromedriver.exe要加入到path中? 一直使用robot framework编写脚本,结果有一天输入 pybot XXXX.robot ...
- Learn Python3 the hard way 第一天总结 命令行(1)
附录-命令行快速入门(1) command line interface 简称 CLI ,可以在mac OS 上通过一些输入进行一些操作. 1如何在迷路后怎样回家 命令: pwd:打印工作目录cd 更 ...