Closed clabnet closed 1 year ago
QC2168
commented
1 year ago Thank you very much for your feedback!
This was caused by a MarkPointComponent not being referenced inside useCharts, this issue has now been fixed, please update useCharts to 1.2.3
QC2168
commented
1 year ago 
QC2168
commented
1 year ago If you are using typescript, you need to adjust the Option type, otherwise there will be a type error
import type { MarkPointComponentOption } from "echarts";
type EChartsOption = echarts.ComposeOption<
MarkPointComponentOption
>;
const option:EChartsOption = { ...your chart options }
clabnet
commented
1 year ago @QC2168 Your patch is almost ok. Are missing only the vertical lines Speed derated lines and Max Inverter Frequency.
(see first chart).
This is my code ; Do I have to do anything else?
<script setup lang="ts">
import { onMounted, Ref, ref } from 'vue'
import useChart from '@qc2168/use-charts'
import type { MarkPointComponentOption } from 'echarts'
import { useAttrs } from 'vue'
type EChartsOption = echarts.ComposeOption<MarkPointComponentOption>
interface Props {
chartOption: EChartsOption
}
const prop = defineProps<Props>()
const chartEl = ref<HTMLDivElement | null>(null)
const { setOption } = useChart(chartEl as Ref<HTMLDivElement>, {})
const attrs = useAttrs()
const refreshChart = () => {
nextTick(() => {
console.log('Refreshing chart...')
setOption(prop.chartOption, { notMerge: true })
})
}
onMounted(async () => {
refreshChart()
})
/**
* This method can be called from parent
*/
defineExpose({ refreshChart })
</script>
<template>
<div ref="chartEl" :class="attrs.class"></div>
</template>
<style lang="scss" scoped></style>
I'm very sorry, I didn't notice the other two details and missed the other two components, please update to version 1.2.4, it's fixed now
Now that I've imported your entire options, the effect looks like this
QC2168
commented
1 year ago This is my code
<template>
<div ref="chartEl" :style="{ width: `600px`, height: `600px` }"></div>
</template>
<script setup lang="ts">
import { onMounted, Ref, ref, computed, nextTick } from "vue";
import type { MarkPointComponentOption, MarkLineComponentOption, MarkAreaComponentOption } from "echarts";
import useChart from "@qc2168/use-charts";
type EChartsOption = echarts.ComposeOption<
MarkPointComponentOption | MarkLineComponentOption | MarkAreaComponentOption
>;
const option = computed<EChartsOption>(() => ({
title: {
"top": 5,
"text": "Motor Power",
"subtext": "1LE5683-3AC73-4."
},
xAxis: {
"type": "value",
"nameLocation": "middle",
"nameGap": 50,
"name": "Speed [rpm]"
},
yAxis: {
"type": "value",
"nameLocation": "middle",
"nameGap": 50,
"name": "Power [kW]",
"max": 240
},
tooltip: {
"trigger": "axis",
"axisPointer": {
"type": "cross"
}
},
toolbox: {
"show": true,
"feature": {
"dataView": {
"readOnly": true
}
}
},
legend: {
"top": 5,
"data": [
"Power Rated",
"Power Rated 85%"
]
},
series: [
{
"type": "line",
"name": "verticalLine",
"markLine": {
"symbol": [
"none"
],
"label": {
"show": true
},
"data": [
{
"xAxis": 2621.52,
"label": {
"formatter": "Cut Off Speed \n {c} rpm"
}
},
{
"xAxis": 1993,
"label": {
"formatter": "Max Inverter Frequency \n {c} rpm"
}
},
{
"xAxis": 993,
"label": {
"formatter": "Speed Derated Line \n {c} rpm"
}
}
]
}
}, {
"type": "line",
"name": "Power Rated",
"symbol": "none",
"areaStyle": {
"color": "#acd8cb"
},
"lineStyle": {
"color": "#acd8cb"
},
"itemStyle": {
"color": "#acd8cb"
},
"markPoint": {
"label": {
"formatter": "{c}kW"
},
"data": [{
type: 'max'
}],
"symbol": "arrow",
"symbolSize": 80,
"symbolRotate": 180,
"itemStyle": {
"color": "#748a83"
}
},
"data": [
[
0,
0
],
[
50,
10.070493454179255
],
[
100,
20.14098690835851
],
[
150,
30.211480362537763
],
[
200,
40.28197381671702
],
[
250,
50.35246727089627
],
[
300,
60.42296072507553
],
[
350,
70.49345417925478
],
[
400,
80.56394763343404
],
[
450,
90.6344410876133
],
[
500,
100.70493454179254
],
[
550,
110.7754279959718
],
[
600,
120.84592145015105
],
[
650,
130.9164149043303
],
[
700,
140.98690835850957
],
[
750,
151.05740181268882
],
[
800,
161.12789526686808
],
[
850,
171.19838872104734
],
[
900,
181.2688821752266
],
[
950,
191.33937562940585
],
[
993,
200
],
[
1000,
200
],
[
1050,
200
],
[
1100,
200
],
[
1150,
200
],
[
1200,
200
],
[
1250,
200
],
[
1300,
200
],
[
1350,
200
],
[
1400,
200
],
[
1450,
200
],
[
1500,
200
],
[
1550,
200
],
[
1600,
200
],
[
1650,
200
],
[
1700,
200
],
[
1750,
200
],
[
1800,
200
],
[
1850,
200
],
[
1900,
200
],
[
1950,
200
],
[
2000,
200
]
],
},
{
"type": "line",
"data": [
[
0,
0
],
[
50,
8.559919436052366
],
[
100,
17.119838872104733
],
[
150,
25.679758308157098
],
[
200,
34.239677744209466
],
[
250,
42.79959718026183
],
[
300,
51.359516616314195
],
[
350,
59.919436052366564
],
[
400,
68.47935548841893
],
[
450,
77.0392749244713
],
[
500,
85.59919436052365
],
[
550,
94.15911379657602
],
[
600,
102.71903323262839
],
[
650,
111.27895266868076
],
[
700,
119.83887210473313
],
[
750,
128.3987915407855
],
[
800,
136.95871097683786
],
[
850,
145.51863041289025
],
[
900,
154.0785498489426
],
[
950,
162.63846928499498
],
[
993,
170
],
[
1000,
170
],
[
1050,
170
],
[
1100,
170
],
[
1150,
170
],
[
1200,
170
],
[
1250,
170
],
[
1300,
170
],
[
1350,
170
],
[
1400,
170
],
[
1450,
170
],
[
1500,
170
],
[
1550,
170
],
[
1600,
170
],
[
1650,
170
],
[
1700,
170
],
[
1750,
170
],
[
1800,
170
],
[
1850,
170
],
[
1900,
170
],
[
1950,
170
],
[
2000,
170
]
],
"name": "Power Rated 85%",
"symbol": "none",
"areaStyle": {
"color": "#5ebca6"
},
"lineStyle": {
"color": "#5ebca6"
},
"itemStyle": {
"color": "#5ebca6"
}
}
]
}));
const chartEl = ref<HTMLDivElement | null>(null);
const { setOption } = useChart(chartEl as Ref<HTMLDivElement>);
onMounted(() => {
nextTick(() => {
setOption(option.value);
});
});
</script>@QC2168 Good job and beautiful support. You can close this issue, It work very fine.
Thank's
Hi, first of all, thanks for this great library.
We have this chart :
On center and right screen you can see two
markLines(vertical dotted lines Speed derated and Max Inverter) and onemarkPoint(centered down arrow 200 Kw).Here the complete html page with full data to create the chart.
Now, on vue3, using your latest code version 1.2.2 the lines and the arrow are not rendered.
Here full options data.
Should I missing any things ? Thanks in advance.