在做项目前 Echarts 和 Flask 资源和环境都需要提前准备好，这里就不细说，网上都有开源资源包和搭建教程。
阶段一 通用配置项的应用
2-1 bar.html
html
<!-- 2-1 bar.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交通数据可视化</title>
<!--步骤1：引入echarts文件-->
<script src="../static/echarts.min.js"></script>
</head>
<body>
<!--步骤2：准备一个指定宽和高用于放置ECharts图的DOM容器-->
<div id="bar" style="width:600px;height:400px"></div>
<script>
//步骤3：获取容器元素，并初始化ECharts实例对象
var bar=document.getElementById('bar');
var barChart=echarts.init(bar);
//步骤4：准备配置项
var option;
option = {
title:{//标题组件
text:"我国近5年交通事故发生数",//主标题
subtext:"------2019年至2023年",//副标题
},
xAxis:{
type:'category',
data:['1999年','2020年','2021年','2022年','2023年']
},
yAxis:{
type:'value'
},
series:[
{
name:'发生数',
type:'bar',
data:[247646,244674,273098,256409,254738],
}
]
};
//步骤5：将配置项设置给 ECharts 实例对象
option && barChart.setOption(option);
</script>
</body>
</html>效果
2-2 bar_title.html
完成 title 通用配置项的配置
javascript
title:{//标题组件
text:"我国近5年交通事故发生数",//主标题的文本内容
subtext:"------2019年至2023年",//副标题的文本内容
left:'center',//标题在水平轴上的距离，居中
textStyle:{
fontSize:22,//主标题文字的字体大小
fontWeight:'bold',//主标题文字的字体粗细
color:'red' //主标题文本的颜色
},
subtextStyle:{
fontSize:16, //副标题文本的字体大小
color:'#aaa'//副标题文本的颜色
}
},效果
阶段三
tooltip 配置项的应用
2-3 bar_tooltip.html
javascript
tooltip:{
trigger:'item',//触发类型，'item'表示数据项触发
//提示框内容的格式化模板
formatter:'{a}<br/>{b}:{c}起',
//提示框的背景颜色
backgroundColor:'rgba(50,50,50,0.7)', borderColor:'#444',//提示框的边框颜色
borderWidth:1,//提示框的边框宽度
textStyle:{
color:'#fff',//提示框中文本的颜色
fontSize:14 //提示框中文本的字体大小
}
},效果
鼠标悬停效果
2-4 bar_legend.html
legend配置项应用
javascript
legend:{
//图例的数据项，每一项对应一个系列的名称，
//要与 series 的 name 名称一致
dara:['发生数'],
//图例的排列方向，'vertical'表示垂直排列
orient:'vertical',
//图例在水平轴上的距离，居右，偏离右侧 60px 处
right:60,
top:30,//图例在垂直布局，这里设置为偏离顶部 30px 处
show:true,//设置 legend 属性后，show 默认为 true
tetStyle:{
color:'#333',//图例项文本的颜色
fontSize:12,//图例项文本的字体大小
}
},效果
2-5 bar_legend.html
toolbox 配置项应用
javascript
toolbox:{
show:true,//是否显示工具箱
//工具箱的布局方向，'verticar'表示水平布局
orient:'vertical',
//工具箱距离容器左侧的距离，设置为右侧
left:'right',
//工具箱距离容器上侧的距离，设置为顶部
top:'top',
feature:{
saveAsImage:{
show:true,//是否显示保存为图片的工具
title:'保存为图片',//鼠标悬停其上时显示提示文本
type:'png',//保存的图片格式
pixelRatio:2 //保存图片的分辨率比例
},
restore:{
show:true,//是否显示还原工具
title:'还原' //鼠标悬停在工具上时显示的提示文本
},
dataZoom:{
show:true
},
dataView:{
show:true, //是否显示数据视图工具
readOnly:false, //是否只读（是否可编辑内容）
title:'数据视图',//鼠标悬停其上时的提示文本
lang:['数据视图','关闭','刷新']//数据视图的按钮
},
magicType:{
show:true,//是否显示切换图表类型的工具
type:['line','bar'],//可切换的图表类型
title:{
line:'切换为折线图',//切换为折线图的提示文本
bar:'切换为柱状图',//切换为柱状图的提示文本
}
}
}
},效果
直接坐标系常用图绘制
2-6 bar_attributes.html
绘制柱状图 （在 series 中加入）
javascript
markPoint:{
data:[
{
type:'max',name:'最大值' //显示最大值
},
{
type:'min',name:'最小值' //显示最小值
}
]
},
markLine:{
data:[
{type:'average',name:'平均值'} //显示平均线
]
},
label:{
show:true, //显示数值
rotate:45, //旋转45度
position:'inside',//显示在柱子内部
},
barWidth:35, //柱子宽度效果
2-7 bar_datas.html
多系列的柱状图
如果需要实现多系列柱状图，只需要在 series 中添加系列项就可以了
例如
javascript
{
name:'机动车',
type:'bar',
data:[215990,211074,233729,215627,211974],
},
{
name:'非机动车',
type:'bar',
data:[29049,29969,35141,36701,38685],
},
{
name:'其他',
type:'bar',
data:[3588,3631,4228,4081,4071],
}
2-8 bar_stack.html
堆叠柱状图
将 tooltip 中的 trigger 改为 axis
去掉 formatter 设置
将 series 代码改为如下代码：
javascript
series:[
{
name:'机动车',
type:'bar',
stack:'交通事故发生数',
data:[215990,211074,233729,215627,211974],
},
{
name:'非机动车',
type:'bar',
stack:'交通事故发生数',
data:[29049,29969,35141,36701,38685],
},
{
name:'其他',
type:'bar',
stack:'交通事故发生数',
data:[3588,3631,4228,4081,4071],
},
]
};效果
2-21 car_dataZoom.html
dataZoom配置项的应用
复制 2-7 文件，
添加 dataZoom 设置
javascript
dataZoom:[
{
type:'slider',//数据缩放的类型，'slider'表示滑动条
show:'true',//是否显示缩放组件
start:5,//数据窗口范围的起始百分值
end:90,//数据窗口范围的结束百分值
xAxisIndex:0,//数据缩放控制的x坐标轴
},
],
阶段二 绘制折线图
2-9 line_base.html
将 series 中的 type 设置为 'line' ，series 代码如下
javascript
series:[
{
name:'交通事故发生数',
type:'line',
data:[247646,244674,273098,256409,254738],
}
]基础折线图
2-10 line_attribubtes.html
折线图的常见效果
更改 potion 中的设置如下：
javascript
option = {
title:{//标题组件
text:"我国近5年交通事故发生数",//主标题的文本内容
subtext:"------2019年至2023年",//副标题的文本内容
left:'center',//标题在水平轴上的距离，居中
textStyle:{
fontSize:22,//主标题文字的字体大小
fontWeight:'bold',//主标题文字的字体粗细
color:'red' //主标题文本的颜色
},
subtextStyle:{
fontSize:16, //副标题文本的字体大小
color:'#aaa'//副标题文本的颜色
}
},
xAxis:{
type:'category',
data:['1999年','2020年','2021年','2022年','2023年'],
boundaryGap:false,
},
yAxis:{
type:'value',
axisLine:{
show:true,//显示轴线
},
scale:true,//脱离0值比例
},
series:[
{
name:'交通事故发生数',
type:'line',
markLine:{
data:[
{type:'average',name:'平均值'}//显示平均线
]
},
label:{
show:true,//显示数值
},
data:[247646,244674,273098,256409,254738],
}
]
};折线图常见效果
2-11 line_smooth.html
平滑曲线图
在 series 中添加 smooth 属性 true 设置，折线图变为平滑曲线图
2-12 line_areaStyle.html
区域面积图
在 series 数据项中添加 areaStyle 设置：
javascript
areaStyle: {},区域面积图
2-13 line_stack.html
堆叠折线图
堆叠折线图也是在 series 的各数据项中，将需要堆叠在一起的数据设置一个相同的 string 类型的 stack 值。
javascript
option = {
title:{//标题组件
text:"我国近5年交通事故发生数",//主标题的文本内容
subtext:"------2019年至2023年",//副标题的文本内容
left:'center',//标题在水平轴上的距离，居中
textStyle:{
fontSize:22,//主标题文字的字体大小
fontWeight:'bold',//主标题文字的字体粗细
color:'red' //主标题文本的颜色
},
subtextStyle:{
fontSize:16, //副标题文本的字体大小
color:'#aaa'//副标题文本的颜色
}
},
xAxis:{
type:'category',
data:['1999年','2020年','2021年','2022年','2023年'],
boundaryGap:false,
},
yAxis:{
type:'value',
axisLine:{
show:true,//显示轴线
},
scale:true,//脱离0值比例
},
series:[
{
name:'机动车',
type:'line',
stack:'交通事故发生数',
areaStyle:{},
data:[215990,211074,233729,215627,211974],
},
{
name:'非机动车',
type:'line',
stack:'交通事故发生数',
areaStyle:{},
data:[29049,29969,35141,36701,38685],
},
{
name:'其他',
type:'line',
stack:'交通事故发生数',
areaStyle:{
color:'#fe0',//区域面积颜色
opacity:0.5,//颜色透明度
},
data:[3588,3631,4228,4081,4071],
},
]
};堆叠折线图：
2-14 scatter_base.html
绘制笛卡尔坐标系散点图
散点图通常由一些离散的点构成，需要将 series 的 type 设置为 'scatter'类型。
javascript
option = {
title:{//标题组件
text:"身高体重相关性",//主标题的文本内容
left:'center',//标题距离容器左侧的距离，居中
textStyle:{
fontSize:22,//主标题文字的字体大小
fontWeight:'bold',//主标题文字的字体粗细
color:'red' //主标题文本的颜色
},
},
xAxis:{
type:'value',//默认值，可缺省
scale:true,//脱离0值比例
name:'身高\n(cm)',//x轴的名称
},
yAxis:{
type:'value',//默认值，可缺省
name:'体重\n(kg)',//y轴名称
axisLine:{
show:true,//显示轴线
},
scale:true,//脱离0值比例
},
series:[
{
type:'scatter',
symbolSize:20, //数据点图形的大小
data:[[170,70],[180,71],[180,62],[177,72],[172,64],[179,75],
[166,53],[162,47],[162,47],[169,76],[162,49],[164,53],
[166,43],[162,52],[175,73],[172,60],[178,79],[163,54],
[160,44],[163,48],[165,45],[167,42],[169,80],[160,49],
[162,54],[181,77],[162,49],[160,52],[161,51],[168,52],
[162,45],[162,45],[171,64],[172,78],[171,66],[174,78],
[177,68],[170,79],[159,46],[163,52],[174,63],[177,73],
[161,55],[171,63],[168,63],[174,73],[163,53],[175,74],
[172,79],[166,48]]
}
]
};2-15 scatter_car.html
绘制散点图
将 series 中 type 的值改为 scatter
html
<!-- 2-1 bar.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交通数据可视化</title>
<!--步骤1：引入echarts文件-->
<script src="../static/echarts.min.js"></script>
</head>
<body>
<!--步骤2：准备一个指定宽和高用于放置ECharts图的DOM容器-->
<div id="bar" style="width:600px;height:400px"></div>
<script>
//步骤3：获取容器元素，并初始化ECharts实例对象
var bar=document.getElementById('bar');
var barChart=echarts.init(bar);
//步骤4：准备配置项
var option;
option = {
title:{//标题组件
text:"我国近5年交通事故发生数",//主标题
subtext:"------2019年至2023年",//副标题
},
xAxis:{
type:'category',
data:['1999年','2020年','2021年','2022年','2023年']
},
yAxis:{
type:'value'
},
series:[
{
name:'发生数',
scatter:'bar',
data:[247646,244674,273098,256409,254738],
}
]
};
//步骤5：将配置项设置给 ECharts 实例对象
option && barChart.setOption(option);
</script>
</body>
</html>
笛卡尔坐标散点图
2-19 car_axis.html
直角坐标系常用配置项应用
修改 xAxis 和 yAxis 的设置，配置直角坐标系
javascript
xAxis:{
type:'value',//默认值，可缺省
scale:true,//脱离0值比例
name:'身高\n(cm)',//x轴的名称
nameLocation:'center',//x轴名称位置
axisLine:{
lineStyle:{
color:'#333',//x轴轴线颜色
width:1 //x轴轴线的宽度
}
},
axisLabel:{
show:true,//是否显示x轴标签
interval:0,//标签的显示间隔，0表示所有标签都显示
rotate:0//标签的旋转角度，0表示不旋转
}
},
yAxis:{
type:'value',//默认值，可缺省
name:'体重\n(kg)',//y轴名称
nameLocation:'middle',//y轴名称位置
axisLine:{
show:true,//显示轴线
lineStyle:{
color:'#333',//y轴轴线的颜色
width:1 //y轴轴线的宽度
},
},
scale:true,//脱离0值比例
axisLabel:{
show:true,//是否显示y轴标签
interval:0,//标签的显示间隔，0表示所有标签都显示
rotate:0//标签的旋转角度，0表示不旋转
},
},
grid 配置项应用
增加 grid 属性设置
javascript
grid:{
show:true,//是否显示网络区域的边框
left:'10%',//网格区域离容器左侧的距离
right:'10%',//网格区域离容器右侧的距离
top:'10%',//网格区域离容器顶部的距离
bottom:'10%',//网格区域离容器底部的距离
containLabel:true,//网格区域是否包含坐标轴的刻度标签
borderColor:'#ccc',//网格区域的边框颜色
borderWidth:2 //网格区域的边框宽度
},网边缘格效果
2-16 scatter_symbolSize.html
散点图中数据点的大小通常可以刻画更多的数据维度，比如，可以用 bmi 体重指数表示数据点的大小，bmi = 体重(公斤) / (身高(米) * (身高(米)） 数据点的大小通过 symbolSize 设置，代码如下：
html
symbolSize:function(arg){
//console.log(arg)
var height = arg[0]/100
var weight = arg[1]
var imb = weight/(height*height)
if (imb > 28)
{return 30}
else if(imb > 24)
{return 20}
else return 10;
}, //数据点图形大小
在 series 中设置多个数据类别，即可绘制多类别散点图
2-17 scatter_series.html
加上 legend 设置，修改 series 设置，代码如下：
html
legend:{
data:['男生','女生'],
right:'right',
},
series:[
{
name:'男生',
type:'scatter',
symbolSize:function(arg){
//console.log(arg)
var height = arg[0]/100
var weight = arg[1]
var imb = weight/(height*height)
if (imb > 28)
{return 30}
else if(imb > 24)
{return 20}
else return 10;
}, //数据点图形大小
data:[[170,70],[180,71],[180,62],[177,72],[172,64],[179,75],
[169,76],[175,73],[172,60],[178,79],[169,80],[181,77],
[171,64],[172,78],[171,66],[177,68],[170,79],[174,63],
[177,73],[171,63],[168,63],[174,73],[175,74],[172,79]]
},
{
name:'女生',
type:'scatter',
symbolSize:function(arg){
//console.log(arg)
var height = arg[0]/100
var weight = arg[1]
var imb = weight/(height*height)
if(imb>28)
{return 30}
else if(imb>24)
{return 20}
else return 10;
},//数据点图形的大小
data:[[166,53],[162,47],[162,47],[162,49],[164,53],
[166,43],[162,52],[163,54],[160,44],[163,48],
[165,45],[167,42],[160,49],[162,54],[162,49],
[160,52],[161,51],[168,52],[162,45],[162,45],
[159,46],[163,52],[161,55],[163,53],[166,48]]
},
]
2-18 scatter_effectScatter.html
绘制涟漪效果散点图
散点图中，数据点可以设置为涟漪效果，这需要将 series 中的 type 设置为 'effectScatter' 类型
将 series 中的两个数据项的 type 均设置为 'effectScatter' 类型
html
type:'effectScatter'
绘制饼图
绘制基本饼图
2-22 pie_base.html
饼图主要用于表现不同类目的数据在总和中的占比。绘制饼图需要将 series 中将 type 设置为 'pie';
无需配置坐标轴，而是把数据名称和值都写在 series 中，其 data 为 Array 类型，每个元素形式为 {value:value值，name:'name名称'}
html
<!-- 2-1 bar.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>身高体重相关性</title>
<!--步骤1：引入echarts文件-->
<script src="../static/echarts.min.js"></script>
</head>
<body>
<!--步骤2：准备一个指定宽和高用于放置ECharts图的DOM容器-->
<div id="bar" style="width:600px;height:400px"></div>
<script>
//步骤3：获取容器元素，并初始化ECharts实例对象
var bar=document.getElementById('bar');
var barChart=echarts.init(bar);
//步骤4：准备配置项
var option;
option = {
title:{//标题组件
Text:"2023年交通事故发生数",//主标题的文本内容
left:'center',//标题距离容器左侧的距离，居中
textStyle:{
ontSize:22,//主标题文字的字体大小
fontWeight:'bold',//主标题文字的字体粗细
},
},
series:[
{
name:'2023年',
type:'pie',
data:[{
value:211974,
name:'机动车'
},
{
value:38685,
name:'非机动车'
},
{
value:4079,
name:'其他'
}
]
}
]
};
//步骤5：将配置项设置给 ECharts 实例对象
option && barChart.setOption(option);
</script>
</body>
</html>
饼图的常用属性设置
2-23 pie_radius_label.html
在 option 中添加 label 属性，在 series 中添加 radius 属性
javascript
label:{
show:true,
formatter:'{b}事故:\n{c}起,{d}%'
},
series:[
{
name:'2023年',
type:'pie',
radius:'60%',//设置饼图半径
selectedMode:'multiple',//选中效果
data:[
{
value:211974,
name:'机动车'
},
{
value:38685,
name:'非机动车'
},
{
value:40079,
name:'其他'
}
]
}
]
绘制圆环图
2-24 pie_circle.html
修改 radius 为 ['30%','50%']
javascript
radius:['30%','50'], //设置饼图半径
绘制南丁格尔图
2-25 pie_roseType.html
在 2-23 pie_radius_laber.html 文件 series 中添加设置 roseType:'area',
javascript
roseType:'area',
绘制雷达图
新建 2-26 文件
2-26 radar_base.html
option 设置如下：
javascript
option = {
title:{
text:'计算机专业部分成绩对比'
},
radar:{
//定义雷达图坐标系
indicator:[//定义各个维度的名称和最大值
{name:'计算机组成原理',max:100},
{name:'线性代数',max:'100'},
{name:'高等数学',max:'100'},
{name:'数据结构',max:'100'},
{name:'面向对象程序设计',max:'100'},
{name:'计算机网络',max:'100'}
]
},
series:[
{
name:'男生 vs 女生',
type:'radar',
data:[
{
value:[83,85,80,80,88,85],
name:'男生'
},
{
value:[80,87,86,85,88,86],
name:'女生'
}
]
}
]
};
绘制仪表盘
2-27 gauge_base.html
新建 2-27文件，其 option 设置如下：
javascript
option = {
title:{
text:'仪表盘',
left:'center',
},
series:[
{
name:'仪表盘',
type:'gauge',
data:[
{value:97,
name:'完成率'}
]
}
]
};
2-28 gaugle_multiple.html
新建2-28文件，option 设置如下：
javascript
option = {
title:{
text:'仪表盘',
left:'center',
},
series:[
{
name:'指标1',
type:'gauge',
radius:'55%',//设置仪表盘的半径
center:['25%','35%'],//第一个仪表盘的位置
detail:{formatter:'{value}%'},//显示当前值格式化文本
min:50,//最小值
data:[{value:75,name:'完成率'}]
},
{
name:'指标2',
type:'gauge',
radius:'55%',//设置仪表盘的半径
center:['75%','35%'],//第二个仪表盘的位置
detail:{formatter:'{value}%'},//显示当前值格式化文本
data:[{value:60,name:'进度'}]
}
]
};
绘制地图
2-29 map_base.html
新建 2-29 文件，代码如下：
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts 地图</title>
<!--引入echarts核心库 echarts.min.js 或 echarts.js -->
<script src="../static/echarts.min.js"></script>
<!-- 引入中国地图数据文件 -->
<script src="../static/china.js"></script>
</head>
<body>
<!--步骤2：准备一个指定宽和高用于放置ECharts图的DOM容器-->
<div id="main" style="width:600px;height:400px;"></div>
<script>
var main = document.getElementById('main');
//初始化 Echarts 实例
var myChart = echarts.init(main);
//配置地图选项
var option = {
title:{
text:'2023年我国交通事故发生数',
left:'center'
},
tooltip:{
trigger:'item',
formatter:function(params){
return params.name+':'+params.value;
}
},
visualMap:{
min:700,
max:21000,
left:'left',//视觉映射组件离容器左侧的距离
top:'bottom',//视觉映射组件离容器下侧的距离
text:['高','低'],//视觉映射组件显示的文本
calculable:true //显示拖动用的手柄
},
series:[
{
name:'交通事故发生数',
type:'map',//map类型
map:'china',//使用注册的地图名称
roam:false,//不允许缩放和拖动地图
label:{
show:true//显示地图上的标签
},
data:[
{name:'北京',value:6472},//name值与地图标签相同
{name:'天津',value:6254},
{name:'河北',value:3871},
{name:'山西',value:7778},
{name:'内蒙古',value:3692},
{name:'辽宁',value:4778},
{name:'吉林',value:6745},
{name:'黑龙江',value:3438},
{name:'上海',value:1169},
{name:'江苏',value:9349},
{name:'浙江',value:9690},
{name:'安徽',value:9400},
{name:'福建',value:7983},
{name:'江西',value:3695},
{name:'山东',value:11589},
{name:'河南',value:20919},
{name:'湖北',value:28492},
{name:'湖南',value:7722},
{name:'广东',value:34353},
{name:'广西',value:15644},
{name:'海南',value:2994},
{name:'重庆',value:4227},
{name:'四川',value:7113},
{name:'贵州',value:13965},
{name:'云南',value:5533},
{name:'西藏',value:785},
{name:'陕西',value:5109},
{name:'甘肃',value:3791},
{name:'青海',value:1699},
{name:'宁夏',value:1450},
{name:'新疆',value:5039}
]
}
]
};
//使用配置项和数据显示图表
option && myChart.setOption(option);
</script>
</body>
</html>
2-30 map_scatter.html
增加 geo 配置，修改 series 配置，在 series 中设置 geoIndex 属性，将地图中的数据与 geo 组件关联起来，并添加散点图相关的设置，代码如下：
javascript
geo:{
map:'china',//与注册的地图名称相同
},
series:[
{
name:'交通事故发生数',
type:'map',//map类型
map:'china',//使用注册的地图名称
geoIndex:0,//将地图上的数据与 geo 组件关联
roam:false,//不允许缩放和拖动地图
label:{
show:true//显示地图上的标签
},
data:[........]
},
{
name:'广东',
type:'effectScatter',
coordinateSystem:'geo',//指明散点使用 geo 的坐标系统
data:[
{name:'广东',value:[113.280637,23.125178,34353]}
],
rippleEffect:{
scale:8,//涟漪动画中波纹的最大缩放比例
color:'red'//涟漪的颜色
},
},
]
主题的应用
在 <head> 标签中加入主题文件如下导入语句，并在初始化 Echarts 实例时在第二参数中加入主题名称
2-31 theme.html
javascript
<script src="../static/shine.js"></script>
var myChart = echarts.init(main,'shine');
调色盘的应用
复制 2-1 bar.html 文件，新建 2-32 color_global.html 文件，在option中增加 color 属性设置
javascript
color:['orange','yellow','red','pink'],
2-33 color_local.html
局部调色盘通过在某个系列中单独设置 color 属性实现，该系列会优先使用局部调色盘中的颜色
新建2-33文件，其 option 配置如下：
option = {
color:['orange','yellow','red','pink'],
title:{//标题组件
text:"我国近5年交通事故发生数及死亡人数",//主标题
subtext:"------2019年至2023年",//副标题
},
legend:{
data:['发生数','死亡人数'],
show:true,
left:'right',
orient:'vertical'
},
xAxis:{
type:'category',
data:['1999年','2020年','2021年','2022年','2023年']
},
yAxis:{
type:'value'
},
series:[
{
name:'发生数',
type:'bar',
data:[247646,244674,273098,256409,254738],
color:'#2222FF95'
},
{
name:'死亡人数',
type:'bar',
data:[62763,61703,62218,60676,60028],
color:'#EE110095',
}
]
};
图自适应浏览器窗口大小的应用
2-34 color_local.html
新建 2-34文件，调整 DOM 容器设置
html
<div id="bar" style="width:600px;height:400px"></div>然后在 </script> 前增加监听及处理代码，如下，可实现图自适应浏览器窗口的大小。
javascript
window.onresize = function(){
barChart.resize();
} 
2-35 test.html
最后补充一下对局部调色盘的使用
Echarts支持线性渐变和径向渐变颜色，通过 itemStyle 的 color 属性配置
下面是线性渐变颜色的设置，前四个参数分别是 x0、y0、x2、y2，范围从 0 到 1 ，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置。
在 series 中每一个项中添加 itemStyle 的 color 属性配置。
javascript
itemStyle:{
color:{
type:'linear',
x:0,
y:0,
x2:0,
y2:1,
colorStops:[
{
offset:0,color:'red'//0%处的颜色
},
{
offset:1,color:'blue'//100%处的颜色
} ],
global:false//缺省为 false
}
}