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
图文并茂解释的很详细!
没怎么试过,哪天可以尝试一下