HTML頁面下echarts圖形繪製
阿新 • • 發佈：2020-12-30
程式碼摘錄
<!-- 通過webpack模組 建立Vue專案--> <!-- npm 獲取 echarts，npm install echarts --save --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="../node_modules/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, //滑鼠懸浮 顯示內容 tooltip: {}, //圖例標籤 legend: { data:['銷量'] }, // 橫座標 資料 xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, // 資料項 series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
效果顯示
嘗試在HTML檔案中引入echarts其它包，結果全部失敗，猜測原因如下：
1 引入包不能滿足使用
2 引入包後使用的方法不恰當
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>myProject</title> <!-- 引入自定義構建失敗案例集 --> <!-- 引入src目錄下pie 使用失敗 <script src="../node_modules/echarts/src/chart/pie/PieSeries.js"></script> <script src="../node_modules/echarts/src/chart/pie/PieView.js"></script> <script src="../node_modules/echarts/src/chart/pie/labelLayout.js"></script> <script src="../node_modules/echarts/src/chart/pie/pieLayout.js"></script> <script src="../node_modules/echarts/src/chart/pie.js"></script> --> <!-- 引入src下 echarts.js 使用失敗 <script src="../node_modules/echarts/src/echarts.js"></script> --> <!-- 引入lib目錄下pie 使用失敗 <script src="../node_modules/echarts/lib/chart/pie/PieSeries.js"></script> <script src="../node_modules/echarts/lib/chart/pie/PieView.js"></script> <script src="../node_modules/echarts/lib/chart/pie/labelLayout.js"></script> <script src="../node_modules/echarts/lib/chart/pie/pieLayout.js"></script> <script src="../node_modules/echarts/lib/chart/pie.js"></script> -->
<script src="../node_modules/echarts/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> echarts.init(document.getElementById('main')).setOption({ title: {text: 'Bing Chart'}, series: { type: 'pie', data: [ {name: 'A', value: 1000}, {name: 'B', value: 2000}, {name: 'C', value: 3000} ] } }); </script> </body> </html>
效果顯示
再介紹完餅圖、柱狀圖的繪製後，接下來，介紹折線圖
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echarts-test</title><script src="../node_modules/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 為 echarts 準備一個具備大小（寬高）的Dom。 --> <div id="main" style="width: 600px;height:400px;"></div> <script> echarts.init(document.getElementById('main')).setOption({ title: {text: 'Line Chart'}, tooltip: {}, // 提供一個工具集，可以做資料檢視，可以匯出圖片，可以還原 toolbox: { feature: { dataView: {}, saveAsImage: { pixelRatio: 200 }, restore: {} } }, xAxis: {}, yAxis: {}, series: [{ type: 'line', smooth: true, data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]] }] }); </script> </body> </html>
效果顯示
我們可以簡單的總結一下：
一 準備工作
1、 在該例中，我們首先通過webpack模版，建立一個vue專案
2、 通過npm安裝echarts模組
二 程式碼結構
我們可以看到，首先程式碼在通過script引入echarts後，繫結頁面元素，例項化一個echarts物件，其次配置圖形的相關引數option，比如資料，比如標題，比如顏色，字型大小等等，最後通過
myChart.setOption(option)繪製圖形
三 在資料方面
對於折線圖 我們需要提供兩個座標軸的資料，以一位陣列的形式在x座標軸內給出類別，在series中給出數值，
// 橫座標 資料
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
// 資料項
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
對於柱狀圖 我們需要在series裡配置一組二維資料，
series: [{
type: 'line',
smooth: true,
data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]
}]
對於餅狀圖 我們需要在series裡配置 一組json物件，每一個物件包含類別和數值
series: {
type: 'pie',
data: [
{name: 'A', value: 1000},
{name: 'B', value: 2000},
{name: 'C', value: 3000}
]
}
對於元件，一個完整的圖形應該有title標籤；對摺線圖和柱狀圖還需要有座標軸，對餅狀圖需要有標籤。
除此之外，還有許多的元件，比如toolbox設定影象的互動操作，比如圖片儲存下載，資料格式動態型別交換等等。