echarts演示筆記

時間 2019-12-10

標籤 echarts 演示筆記简体版

原文原文鏈接

http://echarts.baidu.com/doc/start.htmljavascript

一、新建一個echarts.html文件，爲ECharts準備一個具有大小（寬高）的Dom。html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>java

<body>

<div id="main" style="height:400px"></div>
</body>echarts

二、新建<script>標籤引入模塊化單文件echarts.jsdom

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>模塊化

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>函數

三、新建<script>標籤中爲模塊加載器配置echarts和所需圖表的路徑（相對路徑爲從當前頁面連接到echarts.js），引入圖表文件見引入ECharts2ui

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>spa

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>htm

四、<script>標籤內動態加載echarts和所需圖表，回調函數中能夠初始化圖表並驅動圖表的生成，option見API & Doc

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data:['銷量']
},
xAxis : [
{
type : 'category',
data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"銷量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};

// 爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>

以上就完成了一個簡單的echarts圖表，在真正用的時候要查看文檔，找出本身要的屬性並設置

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。