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 ...
随机推荐
- final、finally和finalize的区别
final.finally和finalize的区别 这三者的区别可以从两个方面来说 1.意思解释方面 (1)final是修饰符(关键字) (2)finally是异常处理中的程序块 (3)finaliz ...
- R语言︱数据集分组、筛选(plit – apply – combine模式、dplyr、data.table)
R语言︱数据集分组 大型数据集通常是高度结构化的,结构使得我们可以按不同的方式分组,有时候我们需要关注单个组的数据片断,有时需要聚合不同组内的信息,并相互比较. 一.日期分组 1.关于时间的包都有很多 ...
- 嵌入式linux------SDL移植（am335x下显示bmp图片）
#include<stdio.h> #include "/usr/local/ffmpeg_arm/include/SDL/SDL.h" char *bmp_name[ ...
- The struts dispatcher cannot be found
1.错误描述 严重:Servlet.service() for servlet jsp threw exception The struts dispatcher cannot be found.Th ...
- No bean named 'sessionFactory' is defined
1.错误描述 严重:Servlet service() for servlet default threw exception . org.springframework.beans.factory. ...
- ORA-00900: invalid SQL statement
1.错误描述 SQL> startup; startup ORA-00900: invalid SQL statement 2.错误原因 3.解决办法
- 物联网框架ServerSuperIO在.NetCore实现跨平台的实践路线
正所谓天下大势,不跟风不行.你不跨平台,很low嘛.java说:你们能跨嘛,跨给我看看.C#说:不要强人所难嘛.java说:能部署在云上吗?docker?微服务?C#说:不要强人所难嘛.java说:你 ...
- Python Cookbook(第3版)中文版：15.20 处理C语言中的可迭代对象
15.20 处理C语言中的可迭代对象¶ 问题¶ 你想写C扩展代码处理来自任何可迭代对象如列表.元组.文件或生成器中的元素. 解决方案¶ 下面是一个C扩展函数例子,演示了怎样处理可迭代对象中的元素: s ...
- FFT \ NTT总结(多项式的构造方法)
前言.FFT NTT 算法 网上有很多,这里不再赘述. 模板见我的代码库: FFT:戳我 NTT:戳我 正经向:FFT题目解题思路 \(FFT\)这个玩意不可能直接裸考的..... 其实一般\(FF ...
- Vue-组件嵌套之——父组件向子组件传值
父组件向子组件传值步骤: 在这里先定义一下,相对本案例来说:App.vue是父组件,Second-module.vue是子组件. 一.首先,值肯定是定义在父组件中的,供所有子组件共享.所以要在父组件的 ...