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>
图表类型：
- line
- bar
- scatter
- k
- pie
- radar
- chord
- force
- map
- gauge
- funnel
- eventRiver
写一个配置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对象~~