圖表組件

ECharts，全稱為Enterprise Charts，是一個使用JavaScript實現(xiàn)的開源可視化庫。它主要用于數(shù)據(jù)可視化領(lǐng)域，能夠方便地創(chuàng)建出直觀、交互性強的圖表。ECharts由百度團隊開發(fā)，目前是Apache的頂級項目之一。ECharts支持的圖表類型非常豐富，包括但不限于柱狀圖、折線圖、餅圖、散點圖、雷達圖、地圖、熱力圖、樹圖、桑基圖等多種。ECharts的設計哲學是可高度定制化和拓展性好，能夠滿足多種數(shù)據(jù)可視化需求。

ECharts的主要特點

Echarts官方鏈接

1. 豐富的圖表類型：ECharts提供了豐富的圖表類型，能夠滿足大部分數(shù)據(jù)可視化需求。
2. 高度可定制：用戶可以通過配置項自定義圖表的各個元素，如色彩、字體、樣式等，滿足個性化展示需求。
3. 良好的交互性：ECharts支持圖表的交互操作，如縮放、拖拽、點擊等，提高用戶體驗。
4. 強大的性能：利用zrender作為渲染引擎，優(yōu)化渲染算法，即使是大數(shù)據(jù)量也能保證較好的性能。
5. 多端適應：支持基于HTML5的Web標準，可在PC和移動設備上使用。
6. 國際化：ECharts支持多國語言，方便國際化項目使用。

安裝命令如下：

cd bingo_web  # 注意，客戶端安裝模塊的所有命令，務必在package.json所在目錄下操作。
npm config set strict-ssl true 
npm install echarts --save --registry=https://registry.npm.taobao.org

安裝完成以后，直接可以在src/views/Bingo.vue頁面組件中進行使用Echarts基本示例查看效果。
你遇到的錯誤信息 "Initialize failed: invalid dom." 指示 ECharts 試圖在一個無效的 DOM 元素上進行初始化。這個問題通常是因為在試圖初始化 ECharts 實例的時候，對應的 DOM 元素還沒有被渲染或不可見，導致 ECharts 無法找到這個元素。

在你的代碼中的以下部分：

var myChart = echarts.init(document.getElementById('main'));

你試圖使用 document.getElementById('main') 來獲取 DOM 元素，但在 Vue 應用中并不存在一個 id="main" 的元素。另外，由于你使用了 Vue 組合式API (<script setup> 標簽)，直接操作 DOM 可能不是最佳實踐。

為了解決這個問題，并且以 Vue 的方式來正確地使用 ECharts，你可以按照以下步驟來修改你的代碼：

步驟 1: 使用 Vue 引用來訪問 DOM 元素

首先，使用 Vue 的 ref 來創(chuàng)建一個引用，而不是使用 document.getElementById。你已經(jīng)為 div 元素創(chuàng)建了一個引用 echartsDom：

<div ref="echartsDom" style="width: 600px; height: 400px;"></div>

步驟 2: 在合適的生命周期鉤子中初始化 ECharts

由于直接在 <script setup> 中執(zhí)行代碼可能會在 DOM 元素準備好之前嘗試訪問它們，因此你需要確保在 DOM 元素可用時初始化 ECharts 實例。在 Vue 3 中，你可以使用 onMounted 鉤子來保證 DOM 已經(jīng)掛載：

import { onMounted, ref } from 'vue';const echartsDom = ref(null); // 創(chuàng)建一個 refonMounted(() => {if (echartsDom.value) {var myChart = echarts.init(echartsDom.value);// 指定圖表的配置項和數(shù)據(jù)var option = {// 配置項...};// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。myChart.setOption(option);}
});

注意：在使用組合式 API 時，通過 ref 創(chuàng)建的引用在模板中使用時不需要 .value，但在 JavaScript 中訪問時，需要通過 .value 來獲取其真實的 DOM 元素。

完整的修改建議

根據(jù)上述步驟修改后，你的 <script setup> 部分應該類似于這樣：

import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
// 其他 import...const echartsDom = ref(null);onMounted(() => {if (echartsDom.value) {var myChart = echarts.init(echartsDom.value);var option = {title: {text: 'ECharts入門示例'},tooltip: {},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};myChart.setOption(option);}
});

并在 template 部分相應地更新 echartsDom ref 的使用：

<div ref="echartsDom" style="width: 600px; height: 400px;"></div>

執(zhí)行效果：

例子2

<template><h1 class="time">Time</h1><div><div class="c1"><ConfigProvider :locale="zhCN"><!-- 應用的其他內(nèi)容 --><div><a-button type="primary" @click="showModal">Open Modal</a-button><a-modal v-model:open="open" title="Basic Modal" @ok="handleOk"><a-form:model="formState"name="basic":label-col="{ span: 8 }":wrapper-col="{ span: 16 }"autocomplete="off"@finish="onFinish"@finishFailed="onFinishFailed"><a-form-itemlabel="Username"name="username":rules="[{ required: true, message: 'Please input your username!' }]"><a-input v-model:value="formState.username" /></a-form-item><a-form-itemlabel="Password"name="password":rules="[{ required: true, message: 'Please input your password!' }]"><a-input-password v-model:value="formState.password" /></a-form-item><a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }"><a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox></a-form-item><a-form-item :wrapper-col="{ offset: 8, span: 16 }"><a-button type="primary" html-type="submit">Submit</a-button></a-form-item></a-form></a-modal></div><a-calendar v-model:value="value" @panelChange="onPanelChange" @select="onSelect"></a-calendar><router-view/></ConfigProvider></div><div class="c2"><div ref="echartsDom" style="width: 600px; height: 400px;"></div></div><div class="c3"><div class="chart" ref="chart"></div></div><div class="c4" ><!-- 在HTML中指定一個容器，用來容納將要繪制的圖表 --><div class="drak" ref="dark"></div></div></div></template><script setup>import * as echarts from 'echarts';import { ConfigProvider } from 'ant-design-vue';import zhCN from 'ant-design-vue/es/locale/zh_CN';import {onMounted, ref} from 'vue';const open = ref(false);const showModal = () => {open.value = true;};const handleOk = e => {console.log(e);open.value = false;};import { reactive } from 'vue';const formState = reactive({username: '',password: '',remember: true,});const onFinish = values => {console.log('Success:', values);};const onFinishFailed = errorInfo => {console.log('Failed:', errorInfo);};const value = ref();const onPanelChange = (value, mode) => {console.log(value, mode);};const echartsDom = ref(null);/*餅圖*/const chart = ref(null)let setbing = () =>{//基于準備好的dom，初始化echarts實例const myChart1 = echarts.init(chart.value);var option1;option1 = {legend: {top: 'bottom'},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},series: [{name: 'Nightingale Chart',type: 'pie',radius: [50, 250],center: ['50%', '50%'],roseType: 'area',itemStyle: {borderRadius: 8},data: [{ value: 40, name: 'rose 1' },{ value: 38, name: 'rose 2' },{ value: 32, name: 'rose 3' },{ value: 30, name: 'rose 4' },{ value: 28, name: 'rose 5' },{ value: 26, name: 'rose 6' },{ value: 22, name: 'rose 7' },{ value: 18, name: 'rose 8' }]}]};//使用剛指定的配置項和數(shù)據(jù)顯示圖表。option1 && myChart1.setOption(option1);}/*3d圖*/const dark = ref()let ditu = () =>{var myChart2 = echarts.init(dark.value);var option2;option2 = {title: {text: 'Proportion of Browsers',subtext: 'Fake Data',top: 10,left: 10},tooltip: {trigger: 'item'},legend: {type: 'scroll',bottom: 10,data: (function () {var list = [];for (var i = 1; i <= 28; i++) {list.push(i + 2000 + '');}return list;})()},visualMap: {top: 'middle',right: 10,color: ['red', 'yellow'],calculable: true},radar: {indicator: [{ text: 'IE8-', max: 400 },{ text: 'IE9+', max: 400 },{ text: 'Safari', max: 400 },{ text: 'Firefox', max: 400 },{ text: 'Chrome', max: 400 }]},series: (function () {var series = [];for (var i = 1; i <= 28; i++) {series.push({type: 'radar',symbol: 'none',lineStyle: {width: 1},emphasis: {areaStyle: {color: 'rgba(0,250,0,0.3)'}},data: [{value: [(40 - i) * 10,(38 - i) * 4 + 60,i * 5 + 10,i * 9,(i * i) / 2],name: i + 2000 + ''}]});}return series;})()};option2 && myChart2.setOption(option2);}onMounted(() => {if (echartsDom.value) {var myChart = echarts.init(echartsDom.value);var option = {title: {text: 'ECharts入門示例'},tooltip: {},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};myChart.setOption(option);}setbing()ditu()});</script><style scoped>.events {list-style: none;margin: 0;padding: 0;}.events .ant-badge-status {overflow: hidden;white-space: nowrap;width: 100%;text-overflow: ellipsis;font-size: 12px;}.notes-month {text-align: center;font-size: 28px;}.notes-month section {font-size: 28px;}.chart{width: 500px;height: 500px;float: left;margin: 0 auto 0 100px;}.c1,.c2,.c3,.c4  {float: left;}.drak{width: 300px;height: 500px;float: left;margin: 0 auto 0 100px;}</style>

實現(xiàn)效果：