echarts图表变形解决方案
在同一页面的多个echarts图在查询或切换图片时可能会变形，如图
解决方案是添加以下几行代码
/*在查询或切换统计图时图片有可能会变形，于是每次调getEchartsData()都给每个chart的宽度定义成初始值*/
$("#myChart2").css( 'width', $("#myChart2").width());
$("#myChart3").css( 'width', $("#myChart3").width());
$("#myChart4").css( 'width', $("#myChart4").width());
解决后的图片
代码
<head>
<title>学习时间记录统计</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="echarts/echarts.js" type="text/javascript"></script>
<script src="jquery/jquery-2.1.3.min.js" type="text/javascript"></script>
<style type="text/css">
h2 {
width: 100%;
height: 18px;
} h2 span {
width: 220px;
height: 20px;
line-height: 20px;
text-align: center;
float: left;
font-size: 0.7em;
font-family:楷体;
font-weight: normal;
cursor: pointer;
background-color: #dddddd;
border:2px solid green;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
} #tab .tab {
color: white;
background-color: brown;
font-weight: bold;
cursor: auto;
}
</style>
</head>
<body>
<div id="this_page">
<h2 id="tab">
<span id="s1" class="tab">饼图</span>
<span id="s2">折线图or柱状图</span>
<span id="s3">地图</span>
<span id="s4">仪表图</span>
</h2><br>
<div id="ct1">
<div id="myChart1" style="height:300px;width:100%;"></div><br><br>
</div>
<div id="ct2">
<div id="myChart2" style="height:300px;width:100%;"></div><br><br>
</div>
<div id="ct3">
<div id="myChart3" style="height:500px;width:100%;"></div><br><br>
</div>
<div id="ct4">
<div id="myChart4" style="height:300px;width:100%;"></div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
getEchartsData();
changetab();
$("#ct1").show();
$("#ct2").hide();
$("#ct3").hide();
$("#ct4").hide();
} function changetab() {
//选中要显示的页面数据
var tabs = document.getElementById("tab").getElementsByTagName("span");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = tab;
}
} function tab() {
if("s1" == this.id) {
$("#ct1").show();
$("#ct2").hide();
$("#ct3").hide();
$("#ct4").hide();
}else if("s2" == this.id) {
$("#ct2").show();
$("#ct1").hide();
$("#ct3").hide();
$("#ct4").hide();
}else if("s3" == this.id){
$("#ct3").show();
$("#ct1").hide();
$("#ct2").hide();
$("#ct4").hide();
}else if("s4" == this.id){
$("#ct4").show();
$("#ct1").hide();
$("#ct2").hide();
$("#ct3").hide();
} var $tabs = $("#tab span");
for (var i = 0; i < $tabs.length; i++) {
$($tabs.get(i)).removeClass("tab");
if ($tabs.get(i) == this) {
$(this).addClass("tab");
}
} } function getEchartsData(){
/*在查询或切换统计图时图片有可能会变形，于是每次调getEchartsData()都给每个chart的宽度定义成初始值*/
$("#myChart2").css( 'width', $("#myChart2").width());
$("#myChart3").css( 'width', $("#myChart3").width());
$("#myChart4").css( 'width', $("#myChart4").width());
//配置echarts的路径
require.config({
paths: {
echarts: 'echarts'
}
});
//初始化echarts插件
require(
[
'echarts',
'echarts/chart/pie',//饼图
'echarts/chart/line',//折线图
'echarts/chart/bar',//柱状图
'echarts/chart/map',//地图
'echarts/chart/gauge'//仪表图
],
drawEcharts//调定义的函数获取参数
);
//学习时间样例数据，也可以是json数据
var arr1 = new Array(100,130,76,150);
//平均学习时间样例数据，也可以是json数据
var arr2 = new Array(150,70,100,130);
//省份样例数据，也可以是json数据
var provic = new Array('北京','上海','天津','重庆',"河北","山西","内蒙古","辽宁","吉林","黑龙江","江苏","浙江","安徽","福建","江西","山东","河南","湖北","湖南","广东","广西","海南","四川","贵州","云南","西藏","陕西","甘肃","青海","宁夏","新疆","香港","澳门","台湾");
//销售额样例数据，也可以是json数据
var toCash = new Array(500,400,30,200,200,40,10,160,50,280,300,180,100,20,270,100,330,350,10,160,50,280,300,180,100,20,3,180,169,150,180,55,66,38); function drawEcharts(ec){
drawPie(ec);//饼图
drawLineOrBar(ec);//折线图或柱状图，可以相互转换
drawMap(ec);//地图
drawGauge(ec);//仪表图
} function drawPie(ec){
//初始化chart
myChart1 = ec.init(document.getElementById('myChart1'));
//option1为类似于json的一个对象，data可以写一个while循环赋值（见地图的数据）
var option1 = {
title : {
text: '上个月每周的学习时间分布',
//subtext: '饼图（Pie Chart）',
x:'center'
},
tooltip : {
trigger: 'item',
//trigger: 'axis',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
y : 'center',
data:['第一周'+arr1[0]+'学时',
'第二周'+arr1[1]+'学时',
'第三周'+arr1[2]+'学时',
'第四周'+arr1[3]+'学时'
]
},
toolbox: {
show : true,
feature : {
//mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
//name:'饼图实例-------------------------------',-------------',
type:'pie',
radius : '75%',
center: ['50%', '60%'],
data:[
{value:arr1[0], name:'第一周'+arr1[0]+'学时'},
{value:arr1[1], name:'第二周'+arr1[1]+'学时'},
{value:arr1[2], name:'第三周'+arr1[2]+'学时'},
{value:arr1[3], name:'第四周'+arr1[3]+'学时'}
]
}
]
}; // 为echarts对象加载数据
myChart1.setOption(option1);
} function drawLineOrBar(ec){
var myChart2 = ec.init(document.getElementById("myChart2"));
var option2 = {
//图表标题
title: {
text: '学习时间折线统计', //正标题
//link: "https:www.baidu.com", /* 正标题链接 点击可在新窗口中打开 */
x: "center" //标题水平方向位置
/* subtext: "From:http://www.xxx.com", */ //副标题
/* sublink: "http://www.xxx.com", //副标题链接 */
//正标题样式
//textStyle: {
// fontSize:24
//},
//副标题样式
/* subtextStyle: {
fontSize:12,
color:"red"
} */
},
//数据提示框配置
tooltip: {
trigger: 'axis' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 其实就是是否共享提示框
},
//图例配置
legend: {
data: ['周学习时间趋势走向','平均学习时间趋势走向'], //这里需要与series内的每一组数据的name值保持一致
y:"bottom"
}, //工具箱配置
toolbox: {
show : true,
feature : {
mark : {show: true}, // 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部
dataView : {show: true, readOnly: false},// 数据视图，上图icon左数8，打开数据视图
magicType : {show: true, type: ['line', 'bar']},// 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图
restore : {show: true}, // 还原，复位原始图表，上图icon左数9，还原
saveAsImage : {show: true} // 保存为图片，上图icon左数10，保存
}
},
calculable: true,
//x轴配置
xAxis: [
{
type: 'category',
//boundaryGap: false,
data: ['第一周', '第二周', '第三周', '第四周'],
name: "周"
}
],
//Y轴配置
yAxis: [
{
type: 'value',
splitArea: {show: false},
name:"单位：小时"
}
],
//图表Series数据序列配置
series: [
{
name: '平均学习时间趋势走向',
type: 'line',
smooth:true,
itemStyle: {normal:{
label : {show:true,formatter:'{c}'},
lineStyle : {color:'#6666FF'}
}
},
data:arr1
},
{
name: '周学习时间趋势走向',
type: 'line',
itemStyle: {normal:{
label : {show:true,formatter:'{c}'},
lineStyle : {color:'#F09D65'}
}
},
data:arr2
}
]
}
myChart2.setOption(option2);
} function drawMap(ec) {
var myChart3 = ec.init(document.getElementById("myChart3"));
var mapParams = {
title : {
text : '销售额',
subtext : '单位(元)',
left : 'center'
},
tooltip : {
trigger : 'item'
},
legend : {
orient : 'vertical',
left : 'left',
data : [ '销售额' ]
},
toolbox : {
show : true,
orient : 'vertical',
left : 'right',
top : 'center',
feature : {
dataView : {
readOnly : true
},
restore : {},
saveAsImage : {}
}
},
/**
* @Parms:visualMap是echarts3中展示的格式
* @Parms:dataRange是echarts2中展示的格式
*/
visualMap : {
min : 0,
max : 500,
text : [ 'High', 'Low' ],
realtime : false,
calculable : true,
inRange : {
color : [ 'brown', 'yellow', '#71C671' ]
}
},
dataRange : {
min : 0,
max : 200,
x : 'left',
selectedMode : false,
y : 'bottom',
text : [ 'High', 'Low' ], // 文本，默认为数值文本
calculable : true,
color : [ 'brown', 'yellow', '#71C671']
},
series : [ {
name : '销售额',
type : 'map',
mapType : 'china',
roam : false,
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : (function() {
var res = [];
var len = provic.length;
while (len--) {
res.push({
name : provic[len],
value : toCash[len]
});
}
return res;
})(),
itemStyle : {
normal : {
color : '#BF3EFF',
borderWidth : 0.5,
borderColor : 'black',
label : {
show : true
}
}
}
}]
};
myChart3.setOption(mapParams);
} function drawGauge(ec) {
var myChart4 = ec.init(document.getElementById('myChart4'));
var option4 = {
tooltip : {
formatter: "{a} : {c}%"
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true}
}
},
series : [
{
name:'销售额',
type:'gauge',
center : ['15%', '50%'], // 默认全局居中
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
width: 3
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :8, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer : {
width : 3
},
title : {
show : true,
offsetCenter: [0, '90%']
},
detail : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'
}
},
detail : {formatter:'{value}%'},
data:[{value: 45, name: '目标净销售额'+100+'万元,\n累计完成'+45+'万元'}]
},
{
name:'回款情况',
type:'gauge',
center : ['50%', '50%'], // 默认全局居中
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
width: 3
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :8, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer : {
width : 3
},
title : {
show : true,
offsetCenter: [0, '90%']
},
detail : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'
}
},
detail : {formatter:'{value}%'},
data:[{value: 79, name: '目标净回款'+200+'万元,\n累计净回款'+158+'万元'}]
},
{
name:'预算',
type:'gauge',
detail : {formatter:'50%'},
center : ['85%', '50%'], // 默认全局居中
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 3
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :8, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer : {
width : 3
},
title : {
show : true,
offsetCenter: [0, '90%']
},
detail : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'
}
},
detail : {formatter:'{value}%'},
data:[{value: 88, name: '预算'+100+'万元,\n累计发生'+88+'万元'}]
}
]
};
myChart4.setOption(option4);
}
}
</script>
echarts图表变形解决方案的更多相关文章
- 微信小程序在ios下Echarts图表不能滑动的解决方案
问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...
- echarts图表X轴文字过长解决解决方案：根据文字长度自动旋转
Echarts 标签中文本内容太长的时候怎么办 ? 关于这个问题搜索一下,有很多解决方案.无非就是 省略(间隔显示).旋转文字方向.竖排展示 前面两种解决方案,就是echarts暴露的: { ax ...
- echarts图表自适应浏览器窗口的大小
echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签（axisLabel）折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表控件使用总结2(Line，Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- EditText 默认不获取焦点，弹出软键盘布局变形解决方案
关于弹出软键盘布局变形解决方案: 在androidMainfest.xml文件中在此Activity中写入 android:windowSoftInputMode="adjustPan&qu ...
随机推荐
- Openstack_O版(otaka)部署_镜像服务glance部署
安装和配置服务 1. 建库建用户 mysql -u root -p CREATE DATABASE glance; GRANT ALL PRIVILEGES ON glance.* TO '; GRA ...
- asp.net core轻松入门之MVC中Options读取配置文件
接上一篇中讲到利用Bind方法读取配置文件 ASP.NET Core轻松入门Bind读取配置文件到C#实例 那么在这篇文章中,我将在上一篇文章的基础上,利用Options方法读取配置文件 首先注册MV ...
- Java序列化机制和原理及自己的理解
Java序列化算法透析 Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是一种将这些字节重建成一个对象的过程.Java序列化API提供一 ...
- 在vue中使用css modules替代scroped
前面的话 css modules是一种流行的模块化和组合CSS的系统. vue-loader提供了与css modules的集成,作为scope CSS的替代方案.本文将详细介绍css modules ...
- 搭建基于eclipse的纯的JavaWeb项目
-----------2016.9.9--------------------- 步骤: 1.搭建一个Java项目 2,字该项目下新建一个文件夹,表示根,名字为webapp(name随意) 3,在we ...
- 四大组件之BroadcastReceiver基础
1. 系统广播 1.1 动态注册 (1)创建自定义接收器类继承自BroadcaseReceiver,实现onReceive()方法,对接收到的广播的逻辑处理就是写在这个函数中的. (2)实例化 ...
- 【BZOJ4556】字符串（后缀数组，主席树）
[BZOJ4556]字符串(后缀数组,主席树) 题面 BZOJ 题解 注意看题: 要求的是\([a,b]\)的子串和[c,d]的\(lcp\)的最大值 先来一下暴力吧 求出\(SA\)之后 暴力枚举\ ...
- 【BZOJ5093】图的价值（第二类斯特林数，组合数学，NTT）
[BZOJ5093]图的价值(第二类斯特林数,组合数学,NTT) 题面 BZOJ 题解 单独考虑每一个点的贡献: 因为不知道它连了几条边,所以枚举一下 \[\sum_{i=0}^{n-1}C_{n-1 ...
- CF908D Arbitrary Arrangement
题目大意: 给定三个数\(k\) , \(p_a\) , \(p_b\) 每次有\(\frac{p_a}{p_a+p_b}\)的概率往后面添加一个'a' 每次有\(\frac{p_b}{p_a+p_b ...
- Luogu2973：[USACO10HOL]赶小猪
题面 Luogu Sol 设\(f[i]\)表示炸弹到\(i\)不爆炸的期望 高斯消元即可 另外,题目中的概率\(p/q\)实际上为\(1-p/q\) 还有,谁能告诉我不加\(EPS\),为什么会输出 ...