FrontEnd 步步高升: Echart 使用简单介绍,快速上手~

引入echart

<script src="../js/echarts.js"></script>当然,官方文档给了三种引入方式:

官方说要把script标签放在body末尾,如果你想放在head也没问题。

在window.onload中注册初始化的函数:

window.onload = init;function init() {initChart();}

现在我们有一个全局变量 require

准备DOM

<!–div 有高度就可以了~ echart自适应, 当然高点好看 –><div id="main" class="chart-container"></div>

图表类型:

写一个配置require的函数

function requireConfig() {require.config({paths: {echarts: '../js'}});//这段注释方便以后使用~~ // require(//[//'echarts',//'echarts/chart/bar' // 使用柱状图就加载bar,参考上面图标类型//],//function (ec) {//// 基于准备好的dom,初始化echarts图表//var myChart = ec.init(document.getElementById('bar'));//id改成自己的//var option =// !!!!官网会有很多实例直接给出option,copy过来,,改改就是自己的。////// 为echarts对象加载数据//myChart.setOption(option);//}// );}

折线图实现:function line() {if (!document.getElementById('main')) return;requireConfig();// 使用require(['echarts','echarts/chart/line' // 使用柱状图就加载bar模块,按需加载],function (ec) {// 基于准备好的dom,初始化echarts图表var myChart = ec.init(document.getElementById('main'));var option = {title: {text: '数据统计',},tooltip: {trigger: 'axis'},legend: {selected: {'访客数(UV)': false,'IP数': false,'入口页次数': false,'贡献下游浏览量': false,'退出页次数': false,'平均停留时长': false,'退出率': false},data: ['浏览量', '访客数(UV)', 'IP数', '入口页次数', '贡献下游浏览量', '退出页次数', '平均停留时长', '退出率']},toolbox: {show: true,feature: {mark: {show: true},dataView: {show: true,readOnly: false},magicType: {show: true,type: ['line', 'bar', 'stack', 'tiled']},restore: {show: true},saveAsImage: {show: true}}},calculable: true,xAxis: [{type: 'category',boundaryGap: false,data: ['2015-02-11', '2015-02-13', '2015-02-15', '2015-02-17', '2015-02-19', '2015-02-21', '2015-02-23', '2015-02-25', '2015-02-27', '2015-03-01', '2015-03-03', '2015-03-05', '2015-03-07', '2015-09', '2015-03-11', ]}],yAxis: [{type: 'value'}],series: [{name: '浏览量',type: 'line',smooth: false,itemStyle: {normal: {areaStyle: {type: 'default'}}},data: randomJSONObjN(15)},{name: '访客数(UV)',type: 'line',smooth: false,itemStyle: {normal: {areaStyle: {type: 'default'}}},data: randomJSONObjN(15)},{name: 'IP数',type: 'line',smooth: false,itemStyle: {normal: {areaStyle: {type: 'default'}}},data: randomJSONObjN(15)},{name: '入口页次数',type: 'line',smooth: false,itemStyle: {normal: {areaStyle: {type: 'default'}}},data: randomJSONObjN(15)},{name: '贡献下游浏览量',type: 'line',smooth: false,itemStyle: {normal: {areaStyle: {type: 'default'}}},data: randomJSONObjN(15)},{name: '退出页次数',type: 'line',smooth: false,itemStyle: {normal: {areaStyle: {type: 'default'}}},data: randomJSONObjN(15)},{name: '平均停留时长',type: 'line',smooth: false,itemStyle: {normal: {areaStyle: {type: 'default'}}},data: randomJSONObjN(15)},{name: '退出率',type: 'line',smooth: false,itemStyle: {normal: {areaStyle: {type: 'default'}}},data: randomJSONObjN(15)},]};// 为echarts对象加载数据myChart.setOption(option);});}

唯一需要注意的点吧:data需要一个json对象~~

最有效的资本是我们的信誉,它24小时不停为我们工作。

FrontEnd 步步高升: Echart 使用简单介绍,快速上手~

相关文章:

你感兴趣的文章:

标签云: