ECharts图表图例3
java
用ecplise软件
可视化图表
代码：
<! DOCTYPE html >
< html >
< head >
< meta charset =" UTF -8">
<1--引入 ECharts 脚本-->
< script src =" js / echarts . js "></ script >
< title ＞绘制标准条形图＜/ title >
</ head >
< body >
<!-﹣为 ECharts 准备一个指定了大小的 DOM -->
< div id =" main " style =" width :600px; height :400px"></ div >< script type =" text / javascript ">
/／基于准备好的 DOM ，初始化 ECharts 图表
var myChart = echarts . init ( document . getElementById (" main "));/／指定图表的配置项和数据
var option ={
title :{
text :'深圳月最低生活费组成（单位：元）',
subtext :'数据来自 ExcelHome ',
},
tooltip :{
trigger :' axis ',
axisPointer :{/／设置坐标轴指示器，坐标轴触发有效
type :' shadow '/／设置坐标轴默认为直线，可选为：' line '或' shadow '
},
formatter : function ( params ){
var tar = params [0];
return tar . name +'< br />'+ tar . seriesName +':'+ tar . value ;
},
toolbox :{
show : true
feature :{
mark :{ show : true ),
dataView :{ show : true , readOnly : false ),
restore :{ show : true },
saveAsImage :{ show : true }
},
xAxis :[
{
type :' category ',
splitLine :{ show : false },
data :['总费用','房租','水电费','交通费','伙食费','日用品费用']
],
}
yAxis :[
{
type :' value '
],
}
series :[
{
name :'辅助',
type :' bar ',
stack :'总量'
itemStyle :(
normal :{/／设置正常情况下柱子的样式
barBorderColor : rgba (0,0,0,0,7
barBorder Color :' rgba (20,20,0,0.5)',
barBorderWidth :5,/／设置柱子边框的宽度
color :' rgba (0,0,0,0)',/／设置柱子的颜色
color :' rgba (0,220,0,0.8)'
},
emphasis :{/／设置鼠标过时子的样式
barBorderColor :'rgba0,0,0,0
barBorderWidth :25,/／设置鼠标滑动到柱子边框的宽度
color :' rgba (0,0,0,0)'/／设置鼠标滑动到柱子的颜色
}
},
data :[0,1700,1400,1200,300,0]
一
name :'生活费',
type :' bar ',/／设置柱状图
stack :'总量',/／设置堆积
itemStyle :{
normal :{
label :{
show : true ,
position :' inside '
}
},
data :[2900,1200,300,200,900,300]
/／使用刚指定的配置项和数据显示图表
f1
myChart . setOption ( option );
</ script >
</ body >
</ html >
代码结果：
