前言
对于echarts,很多人对它的“优美效果”给出很高的赞赏。我们做网站/应用的时候,很多需要数据统计报表,现在给大家推荐一个百度的报表控件,效果不错,兼容ie8+以上等主流浏览器。
另外,有幸得到一位伯乐的提醒,本人将文章的内容进行了更新。
准备开发环境
1、下载好echarts开发包并加入到工程目录下。
下载地址:http://echarts.baidu.com/echarts2/doc/example.html
2、引入echarts的js ,如:
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>
3、配置echarts显示
<script type="text/javascript">
require.config({
paths: {
echarts: '${ctx}/tiles/echarts'
}
});
require([
'echarts',
'echarts/chart/pie',
'echarts/chart/scatter',
'echarts/chart/bar',
'echarts/chart/line'
],function (ec){
//绘制统计图
drawQyfr(ec);
drawFqyfr(ec);
drawZczjfb(ec);
//..............
});
</script>
4、配置echarts参数(结合示例)
示例
介绍:由于统计的数据量达到百万级,直接访问是不可行的,中间我们已经采举方案(通过sql统计生成json放入中间表,由于统计过程很麻烦且数据量大、耗时,数据需要提前准备好,如:定时统计前一天晚上最新的数据生成最新的json)将数据达到及时访问,提高用户体验。所以其中的数据是在后台就已经生成好了,在配置项目中只负责显示。读者是看不到配置的具体值,但熟悉并用过echarts的读者应该能懂是怎么回事。
● 示例一、柱状图(在“标准柱状图”基础上修改提高美观度):
配置参数:
function drawbzf(ec) {
var temp;
$.ajax({
type: "GET",
url: "${ctx}/dp/piequery?info.sqlcode=20160512145927238",
data: {},
async : false,
success: function(data){
temp = eval('('+data+')');
}
});
// 基于准备好的dom,初始化echarts实例
var myChart = ec.init(document.getElementById("bzf"));
// 指定图表的配置项和数据
var option = {
//显示提示框组件
tooltip : {},
//绘图网格配置
grid : { // 控制图的大小,调整下面这些值就可以,
y : 25,
x : 90,
x2 : 60,
y2 : 85,// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
//去除边框线
borderWidth : 0
},
//x轴相关设置
xAxis : [ {
//设置为类目轴
type : 'category',
//类目在分割线上
boundaryGap : false,
//类目轴名称
data : ['',temp[0].name,temp[1].name,temp[2].name,temp[3].name,temp[4].name,temp[5].name,temp[6].name
,temp[7].name,temp[8].name,temp[9].name,temp[10].name,temp[11].name,temp[12].name,
temp[13].name,temp[14].name,temp[15].name,temp[16].name,temp[17].name,'' ],
//坐标轴刻度标签的相关设置
axisLabel : {
formatter:function(val){
return val.split("").join("\n");
},
textStyle:{
color: '#B6A2DE',
},
interval:0,
//rotate:45,
margin:2,
//刻度样式
textStyle : {
//文字透明
color : 'rgba(255,255,255,0.5)',
},
//坐标轴名称与轴线之间的距离
nameGap : 25,
},
//轴线
axisLine : {
//轴线样式
lineStyle : {
//设置轴线宽度
width : 1,
//轴线颜色
color : 'rgba(1,134,198,0.8)'
},
},
//分割线
splitLine : {
//分割线样式
lineStyle : {
//分割线透明度
color : ['rgba(255,255,255,0)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)']
}
},
//刻度线设置
axisTick : {
//隐藏刻度线
show : false,
}
} ],
//y轴相关设置
yAxis : [ {
//设置为数值轴
type : 'value',
//坐标轴刻度标签的相关设置
axisLabel : {
//刻度样式
textStyle : {
//文字透明
color : 'rgba(255,255,255,0.5)'
},
//刻度格式
formatter : "{value}"+"套"
},
//轴线
axisLine : {
//轴线样式
lineStyle : {
//设置轴线宽度
width : 1,
//轴线颜色
color : 'rgba(1,134,198,0.8)'
}
},
//分割线
splitLine : {
//分割线样式
lineStyle : {
//分割线透明度
color : ['rgba(255,255,255,0)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)'
,'rgba(255,255,255,0)']
}
}
} ],
//系列列表配置
series : [ {
//柱状图
type : 'bar',
//修改柱状图宽度
barWidth : 35,
//系列名称
name : '保障房数量',
boundaryGap : false,
//系列中的数据内容数组
data : [ 0, temp[0].value, temp[1].value, temp[2].value, temp[3].value,temp[4].value,temp[5].value,
temp[6].value,temp[7].value,temp[8].value,temp[9].value,temp[10].value,temp[11].value,
temp[12].value,temp[13].value,temp[14].value,temp[15].value,temp[16].value,temp[17].value,0 ],
//系列样式
itemStyle : {
normal : {
//柱状图颜色
color : function(params) {
// 颜色列表
var colorList = [ 'rgba(0,0,0,0)',
'rgb(194,35,43)', 'rgb(182,196,53)','rgb(253,206,15)', 'rgb(233,125,38)',
'rgb(39,115,124)', 'rgb(255,131,99)','rgb(251,218,97)', 'rgb(95,192,221)',
'rgb(226,80,75)', 'rgb(213, 75, 68)','rgb(285, 121, 29)','rgb(201, 118, 232)',
'rgb(95, 165, 85)','rgb(253, 110, 56)','rgb(216, 50, 65)','rgb(233, 125, 38)',
'rgb(39, 110, 114)','rgb(233, 105, 8)'];
//返回颜色
return colorList[params.dataIndex];
},
//柱状图圆角
barBorderRadius : 3
}
},
} ]
};
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
效果:
● 示例二、折线图
配置参数:
function drawrffl(ec)
{
//使用SQLCode获取数据
var temp;
$.ajax({
type: "GET",
url: "${ctx}/dp/piequery?info.sqlcode=20160512160333028",
data: {},
async : false,
success: function(data){
data = eval('('+data+')');
temp = data;
}
});
var myChart = ec.init(document.getElementById('rffl'));
var option = {
title : {
x:'left'
},tooltip : {
trigger: 'axis'
},
//绘图网格配置
grid : { // 控制图的大小,调整下面这些值就可以,
y : 25,
x : 90,
x2 : 60,
y2 : 60,// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
//去除边框线
borderWidth : 0,
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['',temp[1].name,temp[2].name,temp[3].name,temp[4].name,temp[5].name,temp[6].name,temp[7].name,temp[8].name],
//坐标轴刻度标签的相关设置
axisLabel : {
//刻度样式
textStyle : {
//文字透明
color : 'rgba(255,255,255,0.5)',
},
//坐标轴名称与轴线之间的距离
nameGap : 25
},
//轴线
axisLine : {
//轴线样式
lineStyle : {
//设置轴线宽度
width : 1,
//轴线颜色
color : 'rgba(1,134,198,0.8)'
}
},
//分割线
splitLine : {
//分割线样式
lineStyle : {
//分割线透明度
color : ['rgba(255,255,255,0)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',
'rgba(255,255,255,0)']
}
},
//刻度线设置
axisTick : {
//隐藏刻度线
show : false,
}
}
],
//y轴相关设置
yAxis : [
{
type : 'value',
axisLabel : {
//刻度样式
textStyle : {
//文字透明
color : 'rgba(255,255,255,0.5)'
},
formatter: '{value}'
},
min:0,
max:110000
}
],
series : [
{
//name:"企业法人登记",
type:'line',
//smooth:true,
data:[temp[0].value,temp[1].value,temp[2].value,temp[3].value,temp[4].value,temp[5].value,temp[6].value,temp[7].value,temp[8].value],
itemStyle: {
normal: {
//填充区域
areaStyle : {
//默认填充
type : 'default',
//填充颜色
color : 'rgba(251,217,97,0.4)'
},
//线条颜色
color : 'rgba(2, 208, 192,0.8)'
}
},
markPoint : {
data : [
{type : 'min', name: '最小值'},
{type : 'max', name: '最大值'}
]
}
}
]
};
myChart.setOption(option);
}
效果:
● 示例三、堆积条形图
配置参数:
function drawnljg(ec){
var nannljg;
var nvnljg;
$.post("${ctx}/dp/queryjson?info.sqlcode=20160420145043438",
{ Action: "post"},
function(data, textStatus){
data = eval('('+data+')');
nannljg=data[1];
$.post("${ctx}/dp/queryjson?info.sqlcode=20160420150431432",
{ Action: "post"},
function(data, textStatus){
data = eval('('+data+')');
nvnljg=data[1];
var myChart = ec.init(document.getElementById("nljg"));
var option = {
tooltip : {
},
legend: {
data:['男', '女'],
show:false
},
toolbox: {
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value',
splitNumber: 100000 ,
show:false,
}
],
yAxis : [
{
type : 'category',
data : ['20岁以下','21~30岁','31~40岁','41~50岁','51~60岁','61岁以上']
,axisLabel : {
textStyle : {
color : '#717E88'
}
}}
],
grid: { // 控制图的大小,调整下面这些值就可以,
x: 80,
y:30,
x2: 10,
y2: 10,// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
},
series : [
{
name:'男',
type:'bar',
stack: '总量',
itemStyle : { normal: {color: "#FF8363"}},
data:nannljg
},
{
name:'女',
type:'bar',
stack: '总量',
itemStyle : { normal: {
color:"#0086CB",
label : {show: true,
position: 'right',
textStyle: {
color: '#717E88'
},
formatter: function (params){
for (var i = 0, l = option.yAxis[0].data.length; i < l; i++) {
return ((option.series[0].data[i] + params.value)/10000).toFixed(1)+'万';
}
}
}}},
data:nvnljg
}
]
};
myChart.setOption(option);
});
});
}
效果:
● 示例四、环形图
配置参数:
function drawZcdybgcytj(ec)
{
//使用SQLCode获取数据
var temp;
$.ajax({
type: "GET",
url: "${ctx}/dp/piequery?info.sqlcode=20160517104737830",//20160421133808633
data: {},
async : false,
success: function(data){
data = eval('('+data+')');
temp = data;
}
});
var myChart = ec.init(document.getElementById('frlxtjt'));
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'right',
textStyle : {
//文字透明
color : 'rgba(255,255,255,0.5)',
},
data:[temp[0].name,temp[1].name,temp[2].name,temp[3].name,temp[4].name]
},
calculable : true,
series : [
{
name:'法人类型',
type:'pie',
radius : ['55%', '75%'],
center : ['50%', '44%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : false,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:temp[0].value, name:temp[0].name},
{value:temp[1].value, name:temp[1].name},
{value:temp[2].value, name:temp[2].name},
{value:temp[3].value, name:temp[3].name},
{value:temp[4].value, name:temp[4].name}
]
}
]
};
myChart.setOption(option);
}
效果:
● 示例五、柱状+折线
配置参数:
//分街道 -人房分离差异情况柱状图
function drawRfflqk(ec) {
var temp;
$.ajax({
type : "GET",
url : "${ctx}/dp/piequery?info.sqlcode=20160519192023986",
data : {},
async : false,
success : function(data) {
temp = eval('(' + data + ')');
}
});
var myChart = ec.init(document.getElementById("rfflqk"));
option = {
title : {
text : '人房分离差异情况统计图'
},
tooltip : {
trigger : 'axis'
},
legend : {
x : 'center',
y : 'bottom',
data : [ '最近10年人房分离差异柱状图', '最近10年人房分离差异折线图' ]
},
calculable : true,
xAxis : [ {
type : 'category',
data : [ temp[0].name, temp[1].name, temp[2].name, temp[3].name, temp[4].name,
temp[5].name, temp[6].name, temp[7].name]
} ],
grid : { // 控制图的大小,调整下面这些值就可以,
x : 100,
x2 : 100,
y2 : 90,// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
},
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value} 户'
}
} ],
series : [
{
name : '最近10年人房分离差异柱状图',
type : 'bar',
data : [ temp[0].value, temp[1].value, temp[2].value, temp[3].value, temp[4].value,
temp[5].value, temp[6].value, temp[7].value],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
itemStyle : {
normal : {
color : "#08BA70"
}
}
},
{
name : "最近10年人房分离差异折线图",
type : 'line',
smooth : 'true',
data : [ temp[0].value, temp[1].value, temp[2].value, temp[3].value, temp[4].value,
temp[5].value, temp[6].value, temp[7].value ],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
}
} ]
};
myChart.setOption(option);
}
● 示例六、折线走势
配置参数:
function drawFrdjtj(ec)
{
//使用SQLCode获取数据
var cldjYear;
var cldjValue;
$.ajax({
type: "GET",
url: "${ctx}/dp/queryjson?info.sqlcode=20160519172806993",//成立 20160519172806993 old:20160420112618683
data: {},
async : false,
success: function(data){
data = eval('('+data+')');
cldjYear = data[0];
cldjValue = data[1];
}
});
var bgdjValue;
$.ajax({
type: "GET",
url: "${ctx}/dp/queryjson?info.sqlcode=20160519172831038",//变更
data: {},
async : false,
success: function(data){
data = eval('('+data+')');
bgdjValue = data[1];
}
});
var zxdjValue;
$.ajax({
type: "GET",
url: "${ctx}/dp/queryjson?info.sqlcode=20160519172846889",//注销
data: {},
async : false,
success: function(data){
data = eval('('+data+')');
zxdjValue = data[1];
}
});
var myChart = ec.init(document.getElementById('frdjtj'));
var option = {
title : {
text: '法人登记走势图 ',
x:'left'
},tooltip : {
trigger: 'axis'
},
legend: {
data:['成立','变更','注销'],
y : 'bottom'
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : cldjYear,
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}'
},
}
],
series : [
{
name:"成立",
type:'line',
smooth:true,
data:cldjValue,
itemStyle: {
normal: {
areaStyle: {type: 'default',
//填充颜色
color : 'rgba(95, 165, 85,0.8)'
},
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:"变更",
type:'line',
smooth:true,
data:bgdjValue,
itemStyle: {
normal: {
areaStyle: {type: 'default',
//填充颜色
color : 'rgba(255, 127, 80,0.8)'
},
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:"注销",
type:'line',
smooth:true,
data:zxdjValue,
itemStyle: {
normal: {
areaStyle: {type: 'default',
//填充颜色
color : 'rgba(135, 206, 250,0.8)'
},
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
}
]
};
myChart.setOption(option);
}
效果:
以下为静态数据示例
● 示例1
示例1配置:
//租金范围 饼图 1000以下 1000-2000 2000-5000 5000-8000 8000 以上
function drawZjfw(ec)
{
var myChart = ec.init(document.getElementById('zjfw'));
var option = {
title : {
text: '租金范围统计分析',
x :'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:['1000以下','1000-2000','2000-5000','5000-8000','8000 以上']
},
calculable : true,
series : [
{
name:'租金范围',
type:'pie',
radius : [30, 110],
center : ['50%', '50%'],
roseType : 'area',
x: '50%', // for funnel
max: 40, // for funnel
sort : 'ascending', // for funnel
data:[
{value:15, name:'1000以下'},
{value:52, name:'1000-2000'},
{value:86, name:'2000-5000'},
{value:32, name:'5000-8000'},
{value:3, name:'8000 以上'},
]
}
]
};
myChart.setOption(option);
}
//房型结构 饼图
function drawFwjg(ec)
{
var myChart = ec.init(document.getElementById('fwjg'));
var option = {
title : {
text: '房屋结构统计分析',
x :'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y :'bottom',
data:['砖木结构','砖混结构','钢筋混泥土','钢结构']
},
calculable : true,
series : [
{
name:'房屋结构统',
type:'pie',
radius : '50%',
center: ['50%', '50%'],
data:[
{value:335, name:'砖木结构'},
{value:310, name:'砖混结构'},
{value:234, name:'钢筋混泥土'},
{value:135, name:'钢结构'}
]
}
]
};
myChart.setOption(option);
}
● 示例2(和示例1相似)
示例2代码:
//法人类别-饼图(企业法人)
function drawQyfr(ec)
{
var myChart = ec.init(document.getElementById('qyfr'));
var option = {
title: {
text: '企业法人',
x: 'center',
y: '30'
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'horizontal',
x: 'center',
y:'bottom',
data: ['全民所有制企业法人','集体所有制企业法人','私营企业法人','联营企业法人','中外合资经营企业法人','中外合作经营企业法人','外资企业法人']
},
calculable: true,
series: [{
name: '法人',
type: 'pie',
radius : ['20',"80"],
center: ['50%', '50%'],
roseType : 'area',
itemStyle: {
normal: {
label: {
// show:false
},
labelLine:{
show:true
}
},emphasis : {
label : {
show : false,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'全民所有制企业法人'},
{value:310, name:'集体所有制企业法人'},
{value:234, name:'私营企业法人'},
{value:234, name:'联营企业法人'},
{value:234, name:'中外合资经营企业法人'},
{value:234, name:'中外合作经营企业法人'},
{value:234, name:'外资企业法人'}
]
}]
};
myChart.setOption(option);
}
//法人类别-饼图(非企业法人)
function drawFqyfr(ec)
{
var myChart = ec.init(document.getElementById('fqyfr'));
var option = {
title: {
text: '非企业法人',
x: 'center',
y: '30'
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'horizontal',
x: 'center',
y:'bottom',
data: ['机关法人','事业单位法人','社会团体法人']
},
calculable: true,
series: [{
name: '法人',
type: 'pie',
radius : ['20',"80"],
center: ['50%', '50%'],
roseType : 'area',
itemStyle: {
normal: {
label: {
// show:false
},
labelLine:{
show:true
}
},emphasis : {
label : {
show : false,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'机关法人'},
{value:310, name:'事业单位法人'},
{value:234, name:'社会团体法人'}
]
}]
};
myChart.setOption(option);
}
● 示例3
示例3配置:
//法人登记统计图
function drawFrdjtj(ec)
{
var myChart = ec.init(document.getElementById('frdjtj'));
var option = {
title : {
text: '法人登记走势图 ',
x:'left'
},tooltip : {
trigger: 'axis'
},
legend: {
data:['企业法人登记','非企业法人登记']
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['2008年','2009年','2010年','2011年','2012年','2013年','2014年','2015年']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 人'
},
min:100,
max:5000
}
],
series : [
{
name:"企业法人登记",
type:'line',
smooth:true,
data:[789,807,3343,788,544,3450,3076,865],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:"非企业法人登记",
type:'line',
smooth:true,
data:[1340,1556,1530,1867,1473,1678,1977,1787],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
}
]
};
myChart.setOption(option);
}
● 示例4
示例4配置:
//近10年,成立、变更、注销 折线图
function drawFrZxt(ec)
{
var myChart = ec.init(document.getElementById('FrZxt'));
var option = {
title : {
text: '近10年法人登记折线图 ',
x:'left'
},tooltip : {
trigger: 'axis'
},
legend: {
data:['成立','变更','注销'],
y : 'bottom'
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['2005年','2006年','2007年','2008年','2009年','2010年','2011年','2012年','2013年','2014年','2015年']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 人'
},
min:100,
max:5000
}
],
series : [
{
name:"成立",
type:'line',
smooth:true,
data:[1289,807,3343,588,644,2450,1076,665,1258,2341,1398],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:"变更",
type:'line',
smooth:true,
data:[490,586,930,667,323,847,207,1487,2341,1025,542],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:"注销",
type:'line',
smooth:true,
data:[1240,1756,830,967,1473,1278,1177,787,893,875,365],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
}
]
};
myChart.setOption(option);
}