<div id="main" style="height:300px;border:1px solid #ccc;"></div>
<script type="text/javascript">
function GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
var y = dd.getFullYear();
var m = dd.getMonth() + 1;//获取当前月份的日期
var d = dd.getDate();
return m + "/" + d;
}
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
require.config({
paths: {
echarts: '/resources/js/echart/echarts-map',
'echarts/chart/bar': '/resources/js/echart/echarts-map',
'echarts/chart/line': '/resources/js/echart/echarts-map',
'echarts/chart/map': '/resources/js/echart/echarts-map'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'));
var today = GetDateStr(0);
myChart.setOption({
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var res = params[0][1] + " (月利率)";
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i][0] + ' : ' + params[i][2] + '‰';
}
res = res + "<br/><span style='color:#FFCC00'>" + "*以上数据由青岛蓝海民间融资登记服务中心每天实时提供" + "</span>";
return res;
}
},
legend: {
data: ['中心利率']
},
toolbox: {
show: true,
// x: 'center',
// y: 'bottom',
color: ['#4488bb', '#35a7a7'],
feature: {
magicType: {show: true, type: ['line', 'bar']},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['05/15', '05/15', '05/15', '05/15', '05/15', '05/15', '05/15', '05/15']
}
],
yAxis: [
{
type: 'value',
splitArea: {
show: true,
},
max: 10,
min: 3,
precision: 2
}
],
series: [
{
name: '中心利率',
type: 'line',
itemStyle: {
normal: {
color: '#f87341'
}
},
data: [5.4, 6.4, 5.5, 5.6, 5.7, 6.3, 7.3, 8.4]
}
]
})
;
}
);
</script>