66 lines
1.1 KiB
Vue
66 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import {EChartsType} from "echarts/core";
|
||
|
|
import {onMounted} from "vue";
|
||
|
|
|
||
|
|
let props = defineProps({
|
||
|
|
className: {
|
||
|
|
type: String,
|
||
|
|
default: 'chart'
|
||
|
|
},
|
||
|
|
config:{
|
||
|
|
type: Object,
|
||
|
|
default: ()=>{}
|
||
|
|
},
|
||
|
|
id: {
|
||
|
|
type: String,
|
||
|
|
default: 'chart'
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: String,
|
||
|
|
default: '200px'
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: String,
|
||
|
|
default: '200px'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const options = {
|
||
|
|
|
||
|
|
tooltip: {
|
||
|
|
formatter: '{a} <br/>{b} : {c}%'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Pressure',
|
||
|
|
type: 'gauge',
|
||
|
|
detail: {
|
||
|
|
formatter: '{value}'
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 50,
|
||
|
|
name: 'SCORE'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
let chart:EChartsType;
|
||
|
|
const initChart =()=> {
|
||
|
|
let chart = echarts.init(document.getElementById(props.id))
|
||
|
|
chart.setOption(options)
|
||
|
|
return chart
|
||
|
|
}
|
||
|
|
onMounted(()=>{
|
||
|
|
chart = initChart()
|
||
|
|
window.addEventListener('resize',function (){
|
||
|
|
chart&&chart.resize()
|
||
|
|
})
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|