We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
当使用绑定响应式属性ref的select来切换图表的时候,echarts没有了动画,以下是源码里LineChart.vue,,我写了复现代码:
<template> <div class="mode-control"> <a-select v-model:value="chartType" style="width: 120px" @change="onChartTypeChange" > <a-select-option value="trend">trend</a-select-option> <a-select-option value="stack">stack</a-select-option> <a-select-option value="accumulate">accumulate</a-select-option> <a-select-option value="distribute">distribute</a-select-option> </a-select> </div> <div ref="bar" :style="styleObj"></div> </template> <script lang="ts" setup> import {ref, onUpdated, computed,onMounted} from "vue" import echarts from "./index" import {ECharts, EChartsCoreOption} from "echarts/core" const props = defineProps<{ styleObj: {width: string; height: string} }>() const chartType = ref('trend') const styleObj = computed(() => { return { width: props.styleObj.width, height: props.styleObj.height } }) const bar = ref<HTMLElement>() let ins: ECharts | null = null const defaultOption = { legend: { orient: 'horizontal', bottom: 0, data: [] }, tooltip: { show:true }, xAxis: [{ type: 'category', boundaryGap:true, axisTick: { alignWithLabel:true }, axisLabel: { interval: 0, }, data: [] }], yAxis: { type: 'value' }, series: [{ data: [], type: "line", }] } const option = { "legend": { "data": [ { "name": "click.总次数" } ] }, "xAxis": [ { "type": "category", "boundaryGap": true, "axisTick": { "alignWithLabel": true }, "data": [ "04-10", "04-11", "04-12", "04-13", "04-14", "04-15", "04-16" ] } ], "series": [ { "name": "click.总次数", "data": [ 2, 3, 0, 0, 0, 2, 0 ], "type": "line" } ] } const option2 = { "legend": { "data": [ { "name": "click.总次数" } ] }, "xAxis": [ { "type": "category", "boundaryGap": true, "axisTick": { "alignWithLabel": true }, "data": [ "04-10", "04-11", "04-12", "04-13", "04-14", "04-15", "04-16" ] } ], "series": [ { "xAxisIndex": 0, "name": "click.总次数", "data": [ "2", "3", "0", "0", "0", "2", "0" ], "type": "line", "stack": "x", "areaStyle": {} } ] } const option3 = { "legend": { "data": [ { "name": "click.总次数" } ] }, "xAxis": [ { "type": "category", "boundaryGap": true, "axisTick": { "alignWithLabel": true }, "data": [ "04-10", "04-11", "04-12", "04-13", "04-14", "04-15", "04-16" ] } ], "series": [ { "xAxisIndex": 0, "name": "click.总次数", "data": [ 2, 5, 5, 5, 5, 7, 7 ], "type": "line" } ] } const option4 = { "legend": { "data": [ { "name": "原始日期" } ] }, "xAxis": { "data": [ "click.总次数.总体" ], "axisLabel": { "interval": 0 }, "boundaryGap": true, "axisTick": { "alignWithLabel": true } }, "series": [ { "name": "原始日期", "type": "bar", "barWidth": 40, "data": [ "7" ] } ] } onUpdated(() => { if (bar.value && !ins) { const w = getStyle(bar.value, "width") if (w !== "0px") { ins = echarts.init(bar.value) ins.setOption(defaultOption) } } if (ins) { ins.resize() } }) function getStyle(dom: HTMLElement, attr: string) { return window.getComputedStyle(dom, null)[attr] } const onChartTypeChange = (type:string) => { if (type==='trend') { ins.setOption(option, {replaceMerge: ['series', 'xAxis']}) } else if(type==='stack'){ ins.setOption(option2, {replaceMerge: ['series', 'xAxis']}) } else if(type==='accumulate'){ ins.setOption(option3, {replaceMerge: ['series', 'xAxis']}) } else if(type==='distribute'){ ins.setOption(option4, {replaceMerge: ['series', 'xAxis']}) } } </script> <style lang="scss" scoped></style>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
当使用绑定响应式属性ref的select来切换图表的时候,echarts没有了动画,以下是源码里LineChart.vue,,我写了复现代码:
The text was updated successfully, but these errors were encountered: