123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- <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>
|