Echarts.js使用

時間 2019-12-07

標籤 echarts.js echarts 使用欄目 JavaScript 简体版

原文原文鏈接

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

<script src="echarts.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:300px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例 init：初始化
var myChart = echarts.init(document.getElementById('main'));javascript

// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts開始啦'
},html

tooltip: {},
// 圖例
legend: {
data:['銷量展現']
},java

xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
// 軸，軸線
yAxis: {},
// 系列、連續
series: [{
name: '銷量展現',
type: 'bar',
data: [10, 15, 20, 30, 40, 10]
}]
};node

// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>webpack

另外一種方法：web

經過 npm 上安裝的 ECharts 和 zrender 會放在node_modules目錄下。能夠直接在項目代碼中 require('echarts') 獲得 ECharts。npm

var echarts = require('echarts'); // 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 繪製圖表 myChart.setOption({ title: { text: 'ECharts 入門示例' }, tooltip: {}, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });按需引入：http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

相關標籤/搜索

每日一句

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