安装
npm i -D echarts
使用
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted } from 'vue'onMounted(() => {interface DataItem {value: [string, number]}let myChart = echarts.init(document.getElementById('main'))let data: DataItem[] = []const randomData = (): DataItem => {let now = new Datelet value = Math.random() * 21 + 100return {value: [[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-') +' ' +[now.getHours(), now.getMinutes(), now.getSeconds()].join(':'),Math.round(value)]}}let option: echarts.EChartsOption = {tooltip: {trigger: 'axis',valueFormatter: value => value + ' °C'},xAxis: {name: '时间',type: 'time',axisLabel: {formatter: '{HH}:{mm}'}},yAxis: {name: '温度',type: 'value',axisLabel: {formatter: '{value} °C'},},dataZoom: [{type: 'inside',},{type: 'slider',left: '11%',right: '12%',labelFormatter: value => {const v = new Date(value)return [v.getFullYear(), v.getMonth() + 1, v.getDate()].join('-') +'\n' +[v.getHours(), v.getMinutes(), v.getSeconds()].join(':')},},],series: [{name: '温度',type: 'line',showSymbol: false,data: data,}]}setInterval(() => {data.push(randomData())myChart.setOption<echarts.EChartsOption>({series: [{data: data}]})}, 2000)myChart.setOption(option)
})</script><template><div class="common-layout"><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container></div><div id="main" style="width:600px; height:400px;"></div><el-row class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></el-row>
</template><style>
@media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
</style>
