标签:cat 属性 ext false min arw fun charts 表示
在HTML写个空div
<div id="mainTL" style="height:100% ;width:100%;"></div>
JS中:
myChartTL = echarts.init(document.getElementById(‘mainTL‘)); $(function(){ // 指定图表的配置项和数据 var optionTL = { title : { text : ‘案卷受理统计‘,
top : 20,
textStyle:{
color:‘#fff‘,
fontSize:20
},
// 居中
x : ‘center‘
},
areaStyle:{
normal:{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘rgba(255,234,0,0.96)‘
}, {
offset: .54,
color: ‘rgba(255,234,0,0.36)‘
},{
offset: 1,
color: ‘rgba(255,234,0,0.0)‘
}])
}
},
grid: { left: ‘5%‘, right: ‘5%‘, bottom: ‘10%‘, containLabel: true }, tooltip : { // 提示框触发方式:trigger,坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用 trigger : ‘axis‘ }, legend : { // 靠右显示 //x : ‘right‘, y:‘top‘,
//设置图标的大小 itemWidth:15, itemHeight:10, /*{ name : ‘受理量‘, itemStyle : { color : ‘CornflowerBlue‘ //把 itemStyle变为textStyle 字体跟随图标颜色 //color : ‘auto‘ } },*/ data : [ ‘受理量‘, ‘办结量‘, ‘退件量‘, ‘超期量‘ ], orient : ‘horizontal‘, top : 30 }, // 是否启用拖拽重计算特性,默认关闭(即值为false) calculable : true, xAxis : [ {
type : ‘category‘,
//留白策略
boundaryGap : false,
axisLine:{
lineStyle:{
color:‘#fff‘
}
},
//去掉中间的分割线
splitLine:{
show:false
},
//数据过多时,想要显示全部时需要加上如下属性
axisLabel:{
interval: 0,
//字体斜向显示
rotate:30,
textStyle : {
fontSize:14
}
},
data : []
} ], //yAxis : {}, yAxis : [{ //type: ‘category‘, type: ‘value‘ //splitNumber :5
axisLine:{
lineStyle:{
color:‘#fff‘
}
},
axisLabel : {
textStyle : {
fontSize:14
}
},
//去掉中间的分割线
splitLine:{
show:false
}
//最小单位刻度为1
minInterval: 1,
//最大值
max:max
}],
series : [{
name:‘受理量‘,
type:‘bar‘,
//调整柱子宽度
barWidth:20,
data:data
}] };
//ajax加载之前先显示一段简单的loading动画
myChartTL.showLoading();
//ajax加载成功之后隐藏loading动画
myChartTL.hideLoading();
// 使用刚指定的配置项和数据显示图表。 myChartTL.setOption(optionTL); }
图标自适应窗口
//窗口自适应 $(window).resize(function() { myChartTL.resize(); }).resize();
标签:cat 属性 ext false min arw fun charts 表示
原文地址:https://www.cnblogs.com/gaomanito/p/8968848.html