標籤：utf-8 ack 安裝 baidu head 繪製 series npm nbsp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:300px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts執行個體 init：初始化
var myChart = echarts.init(document.getElementById(‘main‘));
// 指定圖表的配置項和資料
var option = {
title: {
text: ‘ECharts開始啦‘
},
tooltip: {},
// 圖例
legend: {
data:[‘銷量展示‘]
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
// 軸，軸線
yAxis: {},
// 系列、連續
series: [{
name: ‘銷量展示‘,
type: ‘bar‘,
data: [10, 15, 20, 30, 40, 10]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
另一種方法：
通過 npm 上安裝的 ECharts 和 zrender 會放在node_modules目錄下。可以直接在項目代碼中 require(‘echarts‘) 得到 ECharts。
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%20EChartsEcharts.js使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
