image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-09-20 10:44:22 +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, value: 135,
itemStyle: { itemStyle: {
color: chartListColor()[1], opacity: 0.2,
}, },
}, },
{ {
value: 118, value: 118,
itemStyle: { itemStyle: {
color: chartListColor()[1], opacity: 0.2,
}, },
}, },
{ {
value: 60, value: 60,
itemStyle: { itemStyle: {
color: chartListColor()[1], opacity: 0.2,
}, },
}, },
], ],
@ -1077,6 +1077,7 @@ export function getPieChartDataSet({
radius = 42, radius = 42,
textColor, textColor,
placeholderColor, placeholderColor,
containerColor,
}: { radius: number } & Record<string, string>) { }: { radius: number } & Record<string, string>) {
return { return {
color: chartListColor(), color: chartListColor(),
@ -1110,6 +1111,10 @@ export function getPieChartDataSet({
selectedMode: true, selectedMode: true,
hoverAnimation: true, hoverAnimation: true,
silent: true, silent: true,
itemStyle: {
borderColor: containerColor,
borderWidth: 1,
},
label: { label: {
show: true, show: true,
position: 'center', position: 'center',

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

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

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

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

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

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

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

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