ECharts入門——折線圖與柱狀圖

時間 2021-08-15

標籤 html apache echarts ide 工具搜索引擎 spa code 視頻 htm 欄目 HTML 简体版

原文原文鏈接

爲第一次使用ECharts的小夥伴提供參考，廢話不對說，直接上代碼html

這裏主要對兩個官網案例進行講解：apache

https://echarts.apache.org/examples/en/editor.html?c=line-stackecharts

https://echarts.apache.org/examples/en/editor.html?c=bar-backgroundide

echarts.min.js文件下載工具

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Hello ECharts</title>
</head>
<script src="js/echarts.min.js"></script>
<body>
<div id="line" style="width: 800px;height:400px;"></div>
<div id="bar" style="width: 800px;height:400px;"></div>
</body>

<script> // 折線圖 line(); // 柱狀圖 bar(); function line() { // 獲取到對應的div，並實例化echarts對象 var lineChart = echarts.init(document.getElementById("line")); // 指定配置和數據 var option = { title: { text: '折線圖堆疊' }, //觸發器，移到圖上的效果 tooltip: { trigger: 'axis' }, legend: { data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎'] }, //圖的大小的參數設置 grid: { left: '3%', right: '4%', bottom: '3%', // 防止座標軸標籤溢出 containLabel: true }, // 小工具組件 toolbox: { feature: { saveAsImage: {} } }, xAxis: { // 座標軸類型，（value數值軸,category類目軸,time時間軸,log對數軸） type: 'category', // 關閉座標軸兩邊留白策略 boundaryGap: false, data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'] }, yAxis: { type: 'value' }, series: [ { name: '郵件營銷', type: 'line', //stack數據堆疊，同個類目軸上系列配置相同的stack值後，後一個系列的值會在前一個系列的值上相加。 stack: '總量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '聯盟廣告', type: 'line', stack: '總量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '視頻廣告', type: 'line', stack: '總量', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接訪問', type: 'line', stack: '總量', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '總量', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 把配置給實例對象 lineChart.setOption(option); } function bar() { var barChart = echarts.init(document.getElementById("bar")); var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', //開啓背景色，即單個柱與最高柱的差值的顏色 showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } }] }; barChart.setOption(option); } </script>

</html>