vue3 使用 ECharts5

看ECharts官方文档：ECharts5 

1、效果图：

2、查看配置项：setOption

3、代码使用：

<div class="Echarts">
	<div id="main" style="width: 100%; height: 400px"></div>
</div>
<script>
    import * as echarts from 'echarts/core';
	import { SunburstChart } from 'echarts/charts';
	import { TitleComponent, TooltipComponent } from 'echarts/components';
	// 新的接口中不再包含 Canvas 渲染器，如果需要使用 SVG 渲染模式则使用 SVGRenderer
	import { CanvasRenderer } from 'echarts/renderers';
	echarts.use([SunburstChart, TitleComponent, TooltipComponent, CanvasRenderer]);
	
	export default {
		name:'Home',
		data() {
	        // swiper相关配置属性放在swiper_options这个变量里
			return{
				//myChart
				myChart: '',
				option: {}
			}
		},
		mounted: function () {
			//this.myChart = echarts.init(document.getElementById('main'));
			//this.myChart.setOption(this.option);
			this.initEcharts();
		},
		methods: {
			initEcharts(){
				var that = this;
				var myChart = echarts.init(document.getElementById('main'));
				that.option = {
					title:{
						text: "四季",
						subtext: '节气图',
						left: "center"
					},
					tooltip: {
					    trigger: 'item',
					    formatter: '{b} '
					},
					/* legend: {
						data:['春季','夏季','秋季','冬季'],
					}, */
				    series: {
				        type: 'sunburst',
				        data: [{
				            name: '春季',
				            value: 12,
							itemStyle: {color: 'hsl(10, 100%, 50%)', borderColor: 'hsl(200, 100%, 50%)', borderWidth: 2, },
				            children: [
								{name: '立春', value: 2, itemStyle: {color: 'hsl(315, 100%, 50%)'},},
								{name: '雨水', value: 2, itemStyle: {color: 'hsl(330, 100%, 50%)'},},
								{name: '惊蛰', value: 2, itemStyle: {color: 'hsl(345, 100%, 50%)'},},
								{name: '春分', value: 2, itemStyle: {color: 'hsl(0, 100%, 50%)'},},
								{name: '清明', value: 2, itemStyle: {color: 'hsl(15, 100%, 50%)'},},
								{name: '谷雨', value: 2, itemStyle: {color: 'hsl(30, 100%, 50%)'},},
							]
				        }, {
				            name: '夏季',
							value: 12,
							itemStyle: {color: 'hsl(100, 100%, 50%)', borderColor: 'hsl(300, 100%, 50%)', borderWidth: 2,},
				            children: [
				            	{name: '立夏', value: 2, itemStyle: {color: 'hsl(45, 100%, 50%)'},},
				            	{name: '小满', value: 2, itemStyle: {color: 'hsl(60, 100%, 50%)'},},
				            	{name: '芒种', value: 2, itemStyle: {color: 'hsl(75, 100%, 50%)'},},
				            	{name: '夏至', value: 2, itemStyle: {color: 'hsl(90, 100%, 50%)'},},
				            	{name: '小暑', value: 2, itemStyle: {color: 'hsl(105, 100%, 50%)'},},
				            	{name: '大暑', value: 2, itemStyle: {color: 'hsl(120, 100%, 50%)'},},
				            ]
				        }, {
				            name: '秋季',
				            value: 12,
							itemStyle: {color: 'hsl(190, 100%, 50%)', borderColor: 'hsl(20, 100%, 50%)', borderWidth: 2,},
							children: [
								{name: '立秋', value: 2, itemStyle: {color: 'hsl(135, 100%, 50%)'},},
								{name: '处暑', value: 2, itemStyle: {color: 'hsl(150, 100%, 50%)'},},
								{name: '白露', value: 2, itemStyle: {color: 'hsl(165, 100%, 50%)'},},
								{name: '秋分', value: 2, itemStyle: {color: 'hsl(180, 100%, 50%)'},},
								{name: '寒露', value: 2, itemStyle: {color: 'hsl(195, 100%, 50%)'},},
								{name: '霜降', value: 2, itemStyle: {color: 'hsl(210, 100%, 50%)'},},
							]
				        },{
				            name: '冬季',
				            value: 12,
							itemStyle: {color: 'hsl(280, 100%, 50%)', borderColor: 'hsl(110, 100%, 50%)', borderWidth: 2,},
							children: [
								{name: '立冬', value: 2, itemStyle: {color: 'hsl(225, 100%, 50%)'},},
								{name: '小雪', value: 2, itemStyle: {color: 'hsl(240, 100%, 50%)'},},
								{name: '大雪', value: 2, itemStyle: {color: 'hsl(255, 100%, 50%)'},},
								{name: '冬至', value: 2, itemStyle: {color: 'hsl(270, 100%, 50%)'},},
								{name: '小寒', value: 2, itemStyle: {color: 'hsl(295, 100%, 50%)'},},
								{name: '大寒', value: 2, itemStyle: {color: 'hsl(300, 100%, 50%)'},},
							]
				        }]
				    }
				};
				myChart.setOption(that.option);
			}
		}
	}
</script>

这个还是要点学习成本的，当然，如果你说不用，就当我没说，这东西有手就行，骚嘿！