軟件版本：
eCharts 5.4.3
vue.js 3.2.36
Element Plus 2.3.12
--
序章
官網：
https://echarts.apache.org/zh/index.html
快速上手：
https://echarts.apache.org/handbook/zh/get-started/
下載方式1：jsDelivr CDN
https://www.jsdelivr.com/package/npm/echarts
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
本文簡單試驗 eCharts 繪圖的使用，整理一些 代碼到這裏，方便有需要時使用。
下載
除了全量下載，還可以定製獲取。
https://echarts.apache.org/zh/download.html
試驗方式
1、下載 echarts.min.js ，在 html 中引用本地 echarts.min.js。
2、結合 vue.js 3 實現繪圖。
<script src="../js/echarts.min.js"></script>
普通繪圖：官網
代碼：更改了 style 的 寬高
<body>
<div id="main" style="width: 100%;height:300px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
let myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
let 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>效果：
改爲：折線圖（line）
將 series 下的 type 由 bar 改爲 line 即可。
效果：
改爲：多條折線
修改 option 下的 legend、series 即可：
let option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['10月銷量', '11月銷量', '12月銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '10月銷量',
type: 'line',
data: [5, 6, 7, 8, 9, 10]
}, {
name: '11月銷量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}, {
name: '12月銷量',
type: 'line',
data: [15, 120, 136, 110, 110, 120]
}]
};效果：
改爲：鼠標在圖上移動時顯示數據
在前面的圖中，只有鼠標在圖中節點上時才顯示數據——一個點。
修改 tooltip 即可實現。
下面實現，鼠標劃過圖上 x軸上方時顯示數據。
代碼：
tooltip: {
/* 添加下面的 */
trigger: 'axis'
},效果：
tooltip 配置項
https://echarts.apache.org/zh/option.html#tooltip
屬性 show 默認爲 true——顯示。
其中的 trigger 選項，默認 item，可選 axis、none。
官文：
tooltip. trigger = 'item' 試一試
string
觸發類型。
可選：
'item'
數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
'axis'
座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
在 ECharts 2.x 中只支持類目軸上使用 axis trigger，在 ECharts 3 中支持在直角座標系和極座標系上的所有類型的軸。
並且可以通過 axisPointer.axis 指定座標軸。
'none'
什麼都不觸發。前面的示例 只是簡單顯示數據，更復雜的數據顯示，請看官文。
添加工具欄：toolbox
工具欄。內置有 導出圖片，數據視圖，動態類型切換，數據區域縮放，重置 五個工具。
在配置項中添加 toolbox 選項即可。
代碼：
let option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
/* 工具欄 */
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
// 省略更多內容效果：
通過 工具欄 切換爲 柱狀圖：
通過 工具欄 顯示數據：
通過 工具欄 下載圖片：得到一個 png 圖片
toolbox 配置項
https://echarts.apache.org/zh/option.html#toolbox
前面示例用到的 feature 屬性：
可以根據需要，做更多配置。ben發佈於博客園
TODO 中文怎麼弄？本地化。
改爲：多個 Y 軸
前面的示例中，數據有多個，但是，Y軸只有一個，導致數據小的很難看到趨勢。
需要配置 yAxis，並設置 series 下的 數據的 yAxisIndex 配置項。
代碼：
let option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
/* 工具欄 */
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['10月銷量', '11月銷量', '12月銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: [
/* 3個Y周 */
{
name: '10月',
type: 'value'
},
{
name: '11月',
type: 'value'
},
{
name: '12月',
type: 'value',
/* 設置後和 上一個分開 */
offset: 50,
}
],
series: [{
name: '10月銷量',
type: 'line',
data: [5, 6, 7, 8, 9, 10]
}, {
name: '11月銷量',
type: 'line',
/* 設置數據對應的Y軸，默認都是 最左邊第1個 */
yAxisIndex: 1,
data: [5, 20, 36, 10, 10, 20]
}, {
name: '12月銷量',
type: 'line',
/* 設置數據對應的Y軸，默認都是 最左邊第1個 */
yAxisIndex: 2,
data: [115, 1120, 1136, 1110, 1110, 1210]
}]
};效果（使用 工具欄下載的 png 原圖 上傳）：
從上圖可以看到，銷量數據較小的 10月、11月 的數據變化趨勢 也很明顯了。ben發佈於博客園
yAxis 配置項
https://echarts.apache.org/zh/option.html#yAxis
| 官文：直角座標系 grid 中的 y 軸，一般情況下單個 grid 組件最多隻能放左右兩個 y 軸，多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。 |
文檔這裏 有點問題：
一來就是一個 大括號（{），其實呢，可以配置爲 中括號（[）——多個Y軸。
知道看了 官方示例的 下圖的源碼，才知道可以用 中括號。
https://echarts.apache.org/examples/zh/editor.html?c=area-rainfall
更多內容，請看官文。
resize 功能
在瀏覽器窗口縮放時，繪製的圖是不變化的，因此，需要再改進。
添加下面這句即可實現：
window.addEventListener('resize', myChart.resize);位置：setOption 調用之後。
vue.js 3 + eCharts
在當前頁面繪製
重點：
|
1、<div>元素使用 ref 屬性，繪圖時使用，this.$refs 獲取元素——“this.$refs.containerDiv”； 2、使用 vue.js 3 的方式爲 直接引入 js文件，而非基於 node.js 進行。 |
代碼：ben發佈於博客園
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts Demo：官網-Vue</title>
<script src="../js/echarts.min.js"></script>
<script src="../js/vue_3.2.36_vue.global.min.js"></script>
</head>
<body>
<div id='app'>
<div ref="containerDiv" style="width: 100%;height:300px;"></div>
</div>
</body>
<script type="text/javascript">
const root = {
data() {
return {
};
},
mounted() {
this.drawChart();
},
methods: {
drawChart() {
let container = this.$refs.containerDiv;
let myChart = echarts.init(container, null, {
// renderer: 'canvas',
renderer: 'div',
useDirtyRect: false
});
// 指定圖表的配置項和數據
// 指定圖表的配置項和數據
let option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
/* 工具欄 */
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['10月銷量', '11月銷量', '12月銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: [
/* 3個Y周 */
{
name: '10月',
type: 'value'
},
{
name: '11月',
type: 'value'
},
{
name: '12月',
type: 'value',
/* 設置後和 上一個分開 */
offset: 50,
}
],
series: [{
name: '10月銷量',
type: 'line',
data: [5, 6, 7, 8, 9, 10]
}, {
name: '11月銷量',
type: 'line',
/* 設置數據對應的Y軸，默認都是 最左邊第1個 */
yAxisIndex: 1,
data: [5, 20, 36, 10, 10, 20]
}, {
name: '12月銷量',
type: 'line',
/* 設置數據對應的Y軸，默認都是 最左邊第1個 */
yAxisIndex: 2,
data: [115, 1120, 1136, 1110, 1110, 1210]
}]
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
},
},
watch: {
}
};
const app = Vue.createApp(root);
const vm = app.mount('#app');
</script>
</html>效果：ben發佈於博客園
在 彈窗 中繪製
說明，需要使用和 vue.js 3.0 搭配的 Element Plus 一起使用。
<!-- element-plus 本地 -->
<link rel="stylesheet" href="../js/element-plus/[email protected]_dist_index.css" />
<script src="../js/element-plus/[email protected]_dist_index.full.min.js"></script>
<!-- element-plus: icons -->
<script src="../js/element-plus/unpkg.com_@[email protected]_dist_index.iife.min.js"></script>注意，ben發佈於博客園
1、彈窗沒有顯示時，無法繪製；
2、設置彈窗現實後，無法 立即繪製——存在錯誤。
都是由於 <div> 元素沒有渲染完成。
解決：
先打開彈窗，再點擊 彈窗上的按鈕進行繪製。
當然，也可以使用 異步監聽方案 實現，TODO。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts Demo：官網-Vue-彈窗後繪圖</title>
<script src="../js/vue_3.2.36_vue.global.min.js"></script>
<script src="../js/[email protected]_dist_axios.min.js"></script>
<script src="../js/moment.min.js"></script>
<!-- element-plus 本地 -->
<link rel="stylesheet" href="../js/element-plus/[email protected]_dist_index.css" />
<script src="../js/element-plus/[email protected]_dist_index.full.min.js"></script>
<!-- element-plus: icons -->
<script src="../js/element-plus/unpkg.com_@[email protected]_dist_index.iife.min.js"></script>
<script src="../js/echarts.min.js"></script>
</head>
<body>
<div id='app'>
<el-button @click="showDrawDialog">繪圖彈窗</el-button>
<el-dialog v-model="dialogs.draw.visible" title="繪圖" top="5vh" style="width: 80%;">
<el-button type="primary" @click="drawChart">繪圖1</el-button>
<el-button type="primary" @click="drawChart2">繪圖2</el-button>
<div ref="containerDiv" style="width: 80%;height: 15rem;"></div>
<div ref="containerDiv2" style="width: 80%;height: 15rem;"></div>
</el-dialog>
</div>
</body>
<script>
const rootDialog01 = {
data() {
return {
dialogs: {
draw: {
visible: false,
},
},
};
},
mounted() {
this.initPage();
},
methods: {
initPage() {
},
showDrawDialog() {
this.dialogs.draw.visible = true;
// 不可以 直接調用：彈窗打開是 繪圖div還沒繪製完成。
// this.drawChart();
},
drawChart() {
let container = this.$refs.containerDiv;
let myChart = echarts.init(container, null, {
// renderer: 'canvas',
renderer: 'div',
useDirtyRect: false
});
// 指定圖表的配置項和數據
let option = {
title: {
text: '圖1'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
/* 工具欄 */
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['10月銷量', '11月銷量', '12月銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: [
/* 3個Y周 */
{
name: '10月',
type: 'value'
},
{
name: '11月',
type: 'value'
},
{
name: '12月',
type: 'value',
/* 設置後和 上一個分開 */
offset: 50,
}
],
series: [{
name: '10月銷量',
type: 'line',
data: [5, 6, 7, 8, 9, 10]
}, {
name: '11月銷量',
type: 'line',
/* 設置數據對應的Y軸，默認都是 最左邊第1個 */
yAxisIndex: 1,
data: [5, 20, 36, 10, 10, 20]
}, {
name: '12月銷量',
type: 'line',
/* 設置數據對應的Y軸，默認都是 最左邊第1個 */
yAxisIndex: 2,
data: [115, 1120, 1136, 1110, 1110, 1210]
}]
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
},
drawChart2() {
let container = this.$refs.containerDiv2;
let myChart = echarts.init(container, null, {
// renderer: 'canvas',
renderer: 'div',
useDirtyRect: false
});
// 指定圖表的配置項和數據
let option = {
title: {
text: '圖2'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
/* 工具欄 */
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['10月銷量', '11月銷量', '12月銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: [
/* 3個Y周 */
{
name: '10月',
type: 'value'
},
{
name: '11月',
type: 'value'
},
{
name: '12月',
type: 'value',
/* 設置後和 上一個分開 */
offset: 50,
}
],
series: [{
name: '10月銷量',
type: 'line',
data: [5, 6, 7, 8, 9, 10]
}, {
name: '11月銷量',
type: 'line',
/* 設置數據對應的Y軸，默認都是 最左邊第1個 */
yAxisIndex: 1,
data: [5, 20, 36, 10, 10, 20]
}, {
name: '12月銷量',
type: 'line',
/* 設置數據對應的Y軸，默認都是 最左邊第1個 */
yAxisIndex: 2,
data: [115, 1120, 1136, 1110, 1110, 1210]
}]
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
},
},
watch: {
}
};
const app = Vue.createApp(rootDialog01);
// 使用 E.P
app.use(ElementPlus);
const vm = app.mount('#app');
</script>
</html>效果：ben發佈於博客園
---END---
ben發佈於博客園
本文鏈接：
https://www.cnblogs.com/luo630/p/17884762.html
參考資料
1、javaScript與vue獲取元素的方法
https://blog.csdn.net/wanjun_007/article/details/129103715
小宛碎碎冰 於 2023-02-18 19:38:53 發佈
2、vue裏ref ($refs)用法
https://www.cnblogs.com/goloving/p/9404099.html
posted @ 2018-08-01 21:43 古蘭精
3、
ben發佈於博客園
ben發佈於博客園