FrontEndステップアップ:Echart使用簡単紹介、クイックハンド~
echartの導入
もちろん、公式ドキュメントには3つの導入方法があります.私を注文してください.
公式にはscriptラベルをbodyの末尾に置くと言われていますが、headに置きたいなら大丈夫です.
Windowsでonloadに初期化された関数を登録するには:
グローバル変数requireがあります
DOMの準備
グラフの種類: line bar scatter k pie radar chord force map gauge funnel eventRiver
requireを構成する関数を書く
折れ線グラフの実装:
唯一注意しなければならない点は、dataにはjsonオブジェクトが必要です~~
<script src="../js/echarts.js"></script>もちろん、公式ドキュメントには3つの導入方法があります.私を注文してください.
公式にはscriptラベルをbodyの末尾に置くと言われていますが、headに置きたいなら大丈夫です.
Windowsで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オブジェクトが必要です~~