2 changed files with 1 additions and 100 deletions
@ -1,96 +0,0 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<div id="main"></div> |
|||
<div id="main1" ref="elRef"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
// https://vega.github.io/vega/usage/ |
|||
import { defineComponent, onMounted, ref, unref } from 'vue'; |
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
import echarts from 'echarts'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'DemoChart', |
|||
setup() { |
|||
const elRef = ref<any>(null); |
|||
const { setOptions } = useECharts(elRef); |
|||
|
|||
// onMounted(() => { |
|||
// const el = unref(elRef); |
|||
// if (!el || !unref(el)) return; |
|||
// const chart = echarts.init(el); |
|||
|
|||
// window.addEventListener('resize', () => { |
|||
// chart!.resize(); |
|||
// }); |
|||
// // removeResizeFn = removeEvent; |
|||
// var option = { |
|||
// title: { |
|||
// text: 'ECharts entry example', |
|||
// }, |
|||
// tooltip: {}, |
|||
// legend: { |
|||
// data: ['Sales'], |
|||
// }, |
|||
// xAxis: { |
|||
// data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'], |
|||
// }, |
|||
// yAxis: {}, |
|||
// series: [ |
|||
// { |
|||
// name: 'Sales', |
|||
// type: 'bar', |
|||
// data: [5, 20, 36, 10, 10, 20], |
|||
// }, |
|||
// ], |
|||
// }; |
|||
// chart && chart.setOption(option as any); |
|||
// }); |
|||
onMounted(() => { |
|||
var myChart = echarts.init(elRef.value); |
|||
// specify chart configuration item and data |
|||
var option = { |
|||
title: { |
|||
text: 'ECharts entry example', |
|||
}, |
|||
tooltip: {}, |
|||
legend: { |
|||
data: ['Sales'], |
|||
}, |
|||
xAxis: { |
|||
data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'], |
|||
}, |
|||
yAxis: {}, |
|||
series: [ |
|||
{ |
|||
name: 'Sales', |
|||
type: 'bar', |
|||
data: [5, 20, 36, 10, 10, 20], |
|||
}, |
|||
], |
|||
}; |
|||
setOptions(option); |
|||
// use configuration item and data specified to show chart |
|||
// myChart.setOption(option); |
|||
// window.addEventListener('resize', () => { |
|||
// myChart.resize(); |
|||
// }); |
|||
}); |
|||
|
|||
return { elRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style> |
|||
.container { |
|||
width: 100%; |
|||
} |
|||
|
|||
#main, |
|||
#main1 { |
|||
width: 40%; |
|||
height: 300px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue