Yup. Didn't work. Maybe I'm mis-undestanding something. I went to vue-echarts | Apache ECharts component for Vue.js. and clicked on the first vue3 example link: Vue-ECharts + Vue 3 - StackBlitz and the code has:
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
]);
And those things are not there if you import * as echarts from 'echarts'...
I should have used your example, that works real easy: 
Alright, time to put all this into a release so someone else can tinker with charts!
Re: plotly... I'm really happy with uPlot for FlexDash and believe it's the right choice for a built-in charting package. Primarily it's very small (~40KB!), is fast, and does a lot. This way FlexDash has easy to use charts built-in without anyone feeling like they're pulling in some big thing they don't want. (The easy-to-use referring to the TimePlot and WindPlot nodes.)
Then, when it comes to Echart, Apex charts, Plotly and the other dozen big fully featured charting packages, everyone has their own preference. And that's fine. Someone here needs to figure out how to integrate them into Node-RED flows, e.g., what should messages contain and how do they drive the charting package. Then it's really easy to put together a custom node-red-fd- node. Again, I can get someone started, but I can't figure out how to use these big charting packages...
For completeness, this is the FD CustomWidget node for David's simple example:
[{"id":"e63901c8e782e435","type":"flexdash custom","z":"451d9acba8e52c2f","fd_container":"28d1859702cdf729","fd_cols":"4","fd_rows":"3","fd_array":false,"fd_array_max":10,"fd_output_topic":"","fd_loopback":false,"name":"Simple Echart","title":"","sfc_source":"<template>\n <div ref=\"echart\" style=\"height:100%; width:100%\"></div>\n</template>\n\n<script>\nimport * as echarts from 'echarts';\n\nexport default {\n // Create the echarts instance\n mounted() {\n //setTimeout(() => {\n console.log(this.$refs.echart.clientWidth)\n this.myChart = echarts.init(this.$refs.echart);\n this.draw()\n //}, 200)\n },\n\n // simple methods within the component\n methods: {\n draw() {\n this.myChart.setOption({\n title: {\n text: 'ECharts Simple'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n });\n },\n },\n}\n\n</script>\n","import_map":{"echarts":"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.esm.js"},"x":480,"y":980,"wires":[[]]},{"id":"28d1859702cdf729","type":"flexdash container","name":"charts","kind":"StdGrid","fd_children":",d2dbe97c44f6fb5a,d2b3883a74adc563,ab904c40d22f83e1,527401ee602f4386,4f31b9c704e0b947,a8dfa00ae270ac88,b27685878ffe3711,8713c375979525c8,5021eeaf697e64c2,02a8193ebdb37b8f,4ba2dad94e5ffd6f,5aa2f5882d6d108c,99d0a46353e4f3f8,8db95e700c175b9c,e63901c8e782e435","title":"","tab":"9f23b0158f8280e3","min_cols":"1","max_cols":"20","unicast":"","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"9f23b0158f8280e3","type":"flexdash tab","name":"charts","icon":"mdi-chart-line","title":"charts","fd_children":",28d1859702cdf729","fd":"e8f5aea52ab49500"}]
And this is the flow with the complex Pie Chart example:
[{"id":"99d0a46353e4f3f8","type":"flexdash custom","z":"451d9acba8e52c2f","fd_container":"28d1859702cdf729","fd_cols":"3","fd_rows":3,"fd_array":false,"fd_array_max":10,"fd_output_topic":"","fd_loopback":false,"name":"Echarts","title":"","sfc_source":"<template>\n <v-chart class=\"chart\" :option=\"option\" autoresize />\n</template>\n\n<style scoped>\n.chart {\n height: 100%;\n}\n</style>\n\n<script>\nimport { use } from 'echarts/core'\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { PieChart } from 'echarts/charts';\nimport {\n TitleComponent,\n TooltipComponent,\n LegendComponent,\n} from 'echarts/components';\n\nimport VChart, { THEME_KEY } from 'vue-echarts'\nuse([\n CanvasRenderer,\n PieChart,\n TitleComponent,\n TooltipComponent,\n LegendComponent,\n]);\n\nexport default {\n // Props are the inputs to the widget.\n // They can be set dynamically using Node-RED messages using `msg.<prop>`.\n // In a \"custom widget\" like this one they cannot be set via the Node-RED flow editor:\n // use the default values in the lines below instead.\n props: {\n option: { default: {} },\n },\n components: { VChart },\n}\n</script>\n","import_map":{"echarts/core":"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.esm.js","echarts/renderers":"https://esm.sh/echarts/renderers","echarts/charts":"https://esm.sh/echarts/charts","echarts/components":"https://esm.sh/echarts/components","vue-echarts":"https://cdn.jsdelivr.net/npm/vue-echarts@6.3.3/dist/index.esm.min.js","vue-demi":"https://cdn.jsdelivr.net/npm/vue-demi@0.13.11/lib/v3/index.mjs","resize-detector":"https://cdn.jsdelivr.net/npm/resize-detector@0.3.0/esm/index.js"},"x":460,"y":940,"wires":[[]]},{"id":"cc83c987de3d9288","type":"inject","z":"451d9acba8e52c2f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":940,"wires":[["e72ace42a696fa66"]]},{"id":"e72ace42a696fa66","type":"function","z":"451d9acba8e52c2f","name":"sample echarts","func":"const option = {\n title: {\n text: 'Traffic Sources',\n left: 'center',\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)',\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],\n },\n series: [\n {\n name: 'Traffic Sources',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: 'Direct' },\n { value: 310, name: 'Email' },\n { value: 234, name: 'Ad Networks' },\n { value: 135, name: 'Video Ads' },\n { value: 1548, name: 'Search Engines' },\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n },\n },\n },\n ],\n}\n\nreturn { option }","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":280,"y":940,"wires":[["99d0a46353e4f3f8"]]},{"id":"28d1859702cdf729","type":"flexdash container","name":"charts","kind":"StdGrid","fd_children":",d2dbe97c44f6fb5a,d2b3883a74adc563,ab904c40d22f83e1,527401ee602f4386,4f31b9c704e0b947,a8dfa00ae270ac88,b27685878ffe3711,8713c375979525c8,5021eeaf697e64c2,02a8193ebdb37b8f,4ba2dad94e5ffd6f,5aa2f5882d6d108c,99d0a46353e4f3f8,8db95e700c175b9c,e63901c8e782e435","title":"","tab":"9f23b0158f8280e3","min_cols":"1","max_cols":"20","unicast":"","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"9f23b0158f8280e3","type":"flexdash tab","name":"charts","icon":"mdi-chart-line","title":"charts","fd_children":",28d1859702cdf729","fd":"e8f5aea52ab49500"}]
These examples will only work with the next release...
. I wish uPlot was better documented. I just fixed-up TimelinePlot to omit the values in the bars when it gets too dense, that was something...
, but someday FlexDash Custom Widgets will be awesome 
To run the simple pie chart example I copied from the vue-echarts site a bunch of additional stuff is needed:
