echarts图表变形解决方案
2024-10-16 18:13:08
在同一页面的多个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>
最新文章
- Java核心技术点之多线程
- Struts2入门-十分简单的登陆
- weblogic 的安装和配置
- Leetcode 6 ZigZag Conversion 字符串处理
- Wix打包系列（一）如何使用wix制作安装程序
- Android从无知到有知——NO.4
- Servlet中web.xml 以及 <url-pattern>总结
- UVALive 3716 DNA Regions
- es日常维护
- (zhuan) How to Train Neural Networks With Backpropagation
- 中文自然语言处理工具hanlp隐马角色标注详解
- ubuntu安装vmare tools
- Spring-IOC注解
- 树莓派 引脚及接口图 AV接口顺序
- 经典Paxos算法笔记
- CSS3 媒体查询@media 查询（响应式布局）
- eclipse文本编码格式修改为UTF-8
- swagger 在本地正常调试 发布后出现500 : {"Message":"出现错误。"}
- 配置 Web 组件服务器 IIS 证书
- 编程中遇到的Python错误和解决方法汇总整理