image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 04:46:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #23 from Tencent/fix/charts

Browse Source 
fix(charts): rerender text color when change mode
This commit is contained in:
PY 2021-12-28 16:54:31 +08:00 committed by GitHub
commit 430cbb83ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/dashboard/base/index.ts
View File

@ -149,19 +149,19 @@ export function constructInitDashboardDataset(type: string) {
{
value: 135,
itemStyle: {
color: chartListColor()[1],
opacity: 0.2,
},
},
{
value: 118,
itemStyle: {
color: chartListColor()[1],
opacity: 0.2,
},
},
{
value: 60,
itemStyle: {
color: chartListColor()[1],
opacity: 0.2,
},
},
],
@ -1077,6 +1077,7 @@ export function getPieChartDataSet({
radius = 42,
textColor,
placeholderColor,
containerColor,
}: { radius: number } & Record<string, string>) {
return {
color: chartListColor(),
@ -1110,6 +1111,10 @@ export function getPieChartDataSet({
selectedMode: true,
hoverAnimation: true,
silent: true,
itemStyle: {
borderColor: containerColor,
borderWidth: 1,
},
label: {
show: true,
position: 'center',

18
src/pages/dashboard/base/index.vue
View File

@ -203,7 +203,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick } from 'vue';
import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts/core';
@ -228,7 +228,7 @@ import { PANE_LIST, SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } f
echarts.use([TooltipComponent, LegendComponent, PieChart, GridComponent, LineChart, BarChart, CanvasRenderer]);
const getThisMonth = (checkedValues?: string[]) => {
let date;
let date: Date;
if (!checkedValues || checkedValues.length === 0) {
date = new Date();
return `${date.getFullYear()}-${date.getMonth() + 1}`;
@ -251,7 +251,7 @@ export default defineComponent({
const store = useStore();
const resizeTime = ref(1);
const { chartColors } = store.state.setting;
const chartColors = computed(() => store.state.setting.chartColors);
// moneyCharts
let moneyContainer: HTMLElement;
@ -283,7 +283,7 @@ export default defineComponent({
stokeContainer = document.getElementById('stokeContainer');
}
stokeChart = echarts.init(stokeContainer);
stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors }));
stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
};
// monitorChart
@ -294,7 +294,7 @@ export default defineComponent({
monitorContainer = document.getElementById('monitorContainer');
}
monitorChart = echarts.init(monitorContainer);
monitorChart.setOption(getLineChartDataSet({ ...chartColors }));
monitorChart.setOption(getLineChartDataSet({ ...chartColors.value }));
};
// monitorChart
@ -305,7 +305,7 @@ export default defineComponent({
countContainer = document.getElementById('countContainer');
}
countChart = echarts.init(countContainer);
countChart.setOption(getPieChartDataSet(chartColors));
countChart.setOption(getPieChartDataSet(chartColors.value));
};
const renderCharts = () => {
@ -331,7 +331,7 @@ export default defineComponent({
});
refundChart.resize({
width: resizeTime.value * 120,
height: resizeTime.value * 66,
height: resizeTime.value * 42,
});
stokeChart.resize({
width: stokeContainer.clientWidth,
@ -390,10 +390,10 @@ export default defineComponent({
BUY_COLUMNS,
onCurrencyChange(checkedValues: string[]) {
currentMonth.value = getThisMonth(checkedValues);
monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors }));
monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
},
onStokeDataChange(checkedValues: string[]) {
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors }));
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
},
rehandleClickOp(val: MouseEvent) {
console.log(val);

14
src/pages/dashboard/detail/index.vue
View File

@ -58,7 +58,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, onUnmounted, watch } from 'vue';
import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts/core';
@ -85,14 +85,14 @@ export default defineComponent({
},
setup() {
const store = useStore();
const { chartColors } = store.state.setting;
const chartColors = computed(() => store.state.setting.chartColors);
// lineChart logic
let lineContainer: HTMLElement;
let lineChart: echarts.ECharts;
const renderLineChart = () => {
lineContainer = document.getElementById('lineContainer');
lineChart = echarts.init(lineContainer);
lineChart.setOption(getFolderLineDataSet({ ...chartColors }));
lineChart.setOption(getFolderLineDataSet({ ...chartColors.value }));
};
// scatterChart logic
@ -101,7 +101,7 @@ export default defineComponent({
const renderScatterChart = () => {
scatterContainer = document.getElementById('scatterContainer');
scatterChart = echarts.init(scatterContainer);
scatterChart.setOption(getScatterDataSet({ ...chartColors }));
scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
};
// chartSize update
@ -152,11 +152,11 @@ export default defineComponent({
PRODUCT_LIST,
PANE_LIST_DATA,
onSatisfyChange() {
scatterChart.setOption(getScatterDataSet({ ...chartColors }));
scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
},
onMaterialChange(value: string[]) {
const { chartColors } = store.state.setting;
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors }));
const chartColors = computed(() => store.state.setting.chartColors);
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
},
};
},

12
src/pages/detail/deploy/index.vue
View File

@ -69,7 +69,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
import { defineComponent, onMounted, onUnmounted, ref, watch, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts/core';
@ -102,7 +102,7 @@ export default defineComponent({
setup() {
const store = useStore();
const { chartColors } = store.state.setting;
const chartColors = computed(() => store.state.setting.chartColors);
const data = ref([]);
const pagination = ref({
defaultPageSize: 10,
@ -133,9 +133,9 @@ export default defineComponent({
onMounted(() => {
monitorContainer = document.getElementById('monitorContainer');
monitorChart = echarts.init(monitorContainer);
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors }));
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
setInterval(() => {
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors }));
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
}, 3000);
});
@ -145,7 +145,7 @@ export default defineComponent({
onMounted(() => {
dataContainer = document.getElementById('dataContainer');
dataChart = echarts.init(dataContainer);
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors }));
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
});
const intervalTimer = null;
@ -168,7 +168,7 @@ export default defineComponent({
});
const onAlertChange = () => {
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors }));
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
};
onMounted(() => {

6
src/pages/user/index.vue
View File

@ -90,7 +90,7 @@
</t-row>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, onUnmounted, watch } from 'vue';
import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
@ -117,7 +117,7 @@ export default defineComponent({
let lineContainer: HTMLElement;
let lineChart: echarts.ECharts;
const store = useStore();
const { chartColors } = store.state.setting;
const chartColors = computed(() => store.state.setting.chartColors);
const onLineChange = (value) => {
lineChart.setOption(getFolderLineDataSet(value));
@ -133,7 +133,7 @@ export default defineComponent({
x2: 10, // 默认80px
y2: 30, // 默认60px
},
...getFolderLineDataSet({ ...chartColors }),
...getFolderLineDataSet({ ...chartColors.value }),
});
};