在fastunit中使用百度ECharts

ECharts是百度推出的一款非常简单易用,且功能强大的商业级数据图表。下面这篇文章将告诉你,如何在fastunit中使用百度ECharts。步骤如下:
1、这里假设把fastunit放在D盘根目录。在D:fastunit\domain\app中创建echartstest目录,并在echartstest下创建echarts.js,内容如下:

require.config({
    paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
    }
});
require([
'echarts',
// 使用柱状图就加载line模块,按需加载
'echarts/chart/line',
// 使用柱状图就加载bar模块,按需加载
'echarts/chart/bar'
],
function(ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高气温', '最低气温']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
}],
series: [{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [{
name: '周最低',
value: -2,
xAxis: 1