ECharts3中的图表大小自适应 - CSDN博客
ECharts3中的图表大小自适应
最近在写一个地图类的应用，用的是echarts的图表，然而一上来就一脸懵逼，如果父级容器的height/width属性设置为百分比的形式，那么echarts就会warning，且不能正常的生成图表。所以div容器的高度宽度必须指定为px，这设计不知道是为啥。
google到的解决方案如下
添加window.onresize=myCharts.resize在setOption之后
我添加后图表的高度被压缩到了min-height，很奇怪，于是自己采用了如下解决方案，直接贴代码了。
var worldMapContainer = document.getElementById('WorldMap');
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight+'px';
resizeWorldMapContainer();
var myChart = echarts.init(worldMapContainer);
var option = {
text: 'ECharts 入门示例'
tooltip: {},
data:['销量'],
height: worldMapContainer.style.height,
width: worldMapContainer.style.width
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
myChart.setOption(option);
window.onresize = function () {
resizeWorldMapContainer();
myChart.resize();
此时，worldMapContainer的高宽已经无所谓了，因为我们已经在js中设定了div容器高宽。
这个方法可以在使ECharts在高度和宽度上均自适应，如若遇到什么坑，之后再补充。
如果是需要图表跟随容器自适应的话，将上述window.innerWidth和window.innerHeight替换为容器元素的container.clientWidth和container.clientHeight即可。其根本原理就是通过JavaScript来刷新图表宽高而非直接css自适应(因为ECharts不支持)
本文已收录于以下专栏：
相关文章推荐
我做的是一个页面多个图表，然后所有图表都需要自适应，首先是建了一个数组，来放这些图表对象。这是关键，不同的图表一定区分开对象。下面开始贴代码：
1、html部分：
图表自适应
网上看到有不少人使用Echarts抽象出来的框架,实现自适应的效果代码:window.onresize  = option.chart.resize(), 这个代码基本是官网上的window.onre...
首先先来个效果图：
这个是缩小后的窗口：
切换效果：
下面是代码：我用的是echarts3.0的，首先要去官网把echarts.min.js下载下来
我写的是bootstrap...
表格参数：
网页可见区域宽：document.body.clientWidth 
网页可见区域高：document.body.clientHeight 
网页可见区域宽：document.body.offse...
阿里云 centos7 mysql tomcat
==========================安装mysql=============================
wget http...
原文：http://blog.csdn.net/u/article/details/
最近在写一个地图类的应用，用的是echarts的图表，然而一上来就一脸懵逼...
echarts使用过程中，图随窗口变化的自适应。
mysql服务报错10061的解决方案
他的最新文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)echarts图行间距如何设置？ - 知乎2被浏览5030分享邀请回答xAxis.boundaryGap
//默认true，这时刻度只是作为分隔线，标签和数据点都会在两个刻度之间。
第二种，咱们改下x轴字体大小和方向吧..尽量装下它们..xAxis.axisLabel.textStyle.fontSize
//文字的字体大小
xAxis.axisLabel.rotate
//标签旋转角度，在标签显示不下的时候可以通过旋转防止重叠。
第三种，下下策，强制显示所有刻度...xAxis.axisLabel.interval
// 0 强制显示所有，1为隔一个标签显示一个标签，2为隔两个
呃，读到这里，可能没有你想要的效果。我就解读到这里了，没有深究了哈。是这样的，我遇到这类问题，我的解决办法是：不必要显示所有的刻度，使用interval = 2,3,4..然后在tooltip中做文章再详细显示横坐标纵坐标的值。2.echarts图的字体样式想改为微软雅黑，如何解决？答：这个简单了哈。用下面这个属性textStyle.fontStyle
//全局的字体样式-字体风格
11 条评论分享收藏感谢收起Echarts使用心得总结——地图 - lwpoor123的博客 - CSDN博客
Echarts使用心得总结——地图
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
下面介绍一下地图的使用：
1、首先引入echart图标库，和地图脚本（可在echart官网下载）
&!DOCTYPE html&
charset="utf-8"&
src="echarts.min.js"&&
src="yunnan.js"&&
2、 在绘制地图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
id="mainMap" style="height: 600 width: 800margin:"&&
3、然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的地图，下面是完整代码。
var myChart = echarts.init(document.getElementById('mainMap'));
var json = JSON.parse($('#hfJson').val());
var data = [];
var maxY = 0;
var minY = json[1].Y;
for (var i = 0; i & json. i++) {
dataAxis.push(json[i].X);
var objJSON = {
name: json[i].X+"",
value: json[i].Y,
data.push(objJSON);
maxY = json[i].Y & maxY ? json[i].Y : maxY;
minY = json[i].Y & minY ? minY : json[i].Y;
myChart.setOption({
text: '各州（市）注册用户数'
tooltip: {
trigger: 'item',
formatter: '{b}&br/&{c} (人)'
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
visualMap: {
min: minY,
max: maxY,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
name: '各州（市）注册用户数',
type: 'map',
mapType: 'yunnan',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
data: data
4、下面就是生成的一个地图数据了
我的热门文章echarts地图,图例与显示数据联动及自定义显示数据
这几天一直在研究php与echarts的集成.集成好了,但是还得根据业务需求更改地域报表.研究了下,主要的有:
&1.为图例添加点击事件
&2.更改鼠标悬停显示的数据(自定义显示,你想显示什么就按照你的来).
&3.图例与鼠标悬停显示的数据联动(例如:三个图例选中,鼠标悬停显示选中三个图例的数据)
&注:本人第一次使用echarts报表插件.若有不足,不完善的或可以优化的地方欢迎大家提出.
&邮箱: dujun_
&//=====echarts地图数据============开始=================//
&//获取echarts-map.js文件
fileLocation ='scripts/echarts/js/echarts-map';
&//获取echarts文件夹,该文件夹下有相关的js文件
echarts='scripts/echarts'
&require.config({
&& paths:{
'echarts': echarts,
'echarts/chart/map':
fileLocation&&&&&&
&// 作为入口
&&& 'echarts',
&&& 'echarts/chart/map'
& displayChart &
displayChart(ec) {
& chinaMapChart =
ec.init(document.getElementByIdx_x_x_x('btnF_set'));
& chinaMapChart.showLoading({
"后台小二狂力奔跑中....."
& //所有构图参数和数据都在此方法里
& chinaMapChartOtion =
getChinaMapChartOption();
chinaMapChart.setOption(chinaMapChartOtion);
&//获得Pie图的选项和数据
getChinaMapChartOption(){
&& //ecConfig这个很重,若要点击事件必须引入config.js文件
&& var ecConfig =
require('echarts/config');
&& //获取图例点击事件
chinaMapChart.on(ecConfig.EVENT.LEGEND_SELECTED,
function (param) {
&&&&&&&&&&&&
len = param.
&& //根据图例判断展示的数据&
并返回true或者false
&& function tf(name){
var tf=true;
if(len == null){
len = chinaMapChartOption.legend.
if(name == '曝光量'){
tf= len.曝光量;
}else if(name == '点击量'){
tf= len.点击量;
}else if(name == '转化量'){
tf= len.转化量;
}else if(name == '消耗量'){
tf= len.消耗量;
tf = true;
&&& //构图& 配置属性
var& chinaMapChartOption = {
type:'PONENT_TYPE_LEGEND',
orient: 'vertical',
data:['曝光量','点击量','转化量','消耗量'],
selectedMode:'single',
selected:{
'曝光量':true,
'点击量':true,
'转化量':true,
'消耗量':true
tooltip : {
trigger: 'item',
//------------自定义鼠标悬停展的数据----------//
//控制鼠标悬停显示数据格式
formatter:function(params,ticket,callback){
var legendSelected =
&&&&&&&&&&&&&&
chinaMapChartOption.legend.
var res='';
var series =
chinaMapChartOption.
for(var i=0; i
&&&&&&&&&&&
//根据图例展示相应的数据信息
&&&&&&&&&&&
if(tf(series[i].name+'')){
&&&&&&&&&&&&&&
var dataArr =
series[i].
&&&&&&&&&&&&&&
for(var j=0;j
&&&&&&&&&&&&&&&&
if(dataArr[j].name ==
params[1]){
&&&&&&&&&&&&&&&&&&&
res+=series[i].name+':'+dataArr[j].value+'';
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&
//若无数据,赋值为零,并且判断根据图例展现相应的数据信息
if(res == ''){
&&&&&&&&&&&
var show ='';
&&&&&&&&&&&
var click = '';
&&&&&&&&&&&
var change = '';
&&&&&&&&&&&
var consume = '';
&&&&&&&&&&&
if(tf('曝光量')){
&&&&&&&&&&&&&
show = '曝光量:0';
&&&&&&&&&&&
&&&&&&&&&&&
if(tf('点击量')){
&&&&&&&&&&&&&
click = '点击量:0';
&&&&&&&&&&&
&&&&&&&&&&&
if(tf('转化量')){
&&&&&&&&&&&&&
change = '转化量:0';
&&&&&&&&&&&
&&&&&&&&&&&
if(tf('消耗量')){
&&&&&&&&&&&&&
consume = '消耗量:0';
&&&&&&&&&&&
&&&&&&&&&&&
res= show + click + change +
//若要测试鼠标悬停展示数据,
//可以把function中的代码删除.只保留下面的代码即可
//return params[1]+":展示量:12;转化量:123;消耗量:46;";
&& &//------------自定义鼠标悬停展的数据--------------//
&&&&&&&&&&&&
toolbox: {
show : true,
orient: 'vertical',
x:'right',
y:'center',
feature : {
&&&&&&&&&&
mark : true,
&&&&&&&&&&
dataView : {readOnly: false}
dataRange: {
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'],//
文本，默认为数值文本
calculable : true
&&&&&&&&&&&&&
//辅助工具箱
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
dataView : {show: true,
readOnly: false},
saveAsImage : {show: true}
series : [
name: '曝光量',
type: 'map',
mapType: 'china',
selectedMode:'single',//展示一个还是多个地图
mapValueCalculation:'sum',
itemStyle:{
&&&&&&&&&&&&
normal:{label:{show:true}},
&&&&&&&&&&&&
emphasis:{label:{show:true}}
name: '点击量',
type: 'map',
mapType: 'china',
selectedMode:'single',
itemStyle:{
&&&&&&&&&&&
normal:{label:{show:true}},
&&&&&&&&&&&
emphasis:{label:{show:true}}
data:click
name: '转化量',
type: 'map',
mapType: 'china',
selectedMode:'single',
itemStyle:{
&&&&&&&&&&&
normal:{label:{show:true}},
&&&&&&&&&&&
emphasis:{label:{show:true}}
data:change
name: '消耗量',
type: 'map',
mapType: 'china',
selectedMode:'single',
itemStyle:{
&&&&&&&&&&&
normal:{label:{show:true}},
&&&&&&&&&&&
emphasis:{label:{show:true}}
data:consume
animation: false
chinaMapChartO
//====echarts地图数据============结束============//
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个示例写的清清楚楚啊。。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：