No.13可视化大屏--vite+vue3 echart 玫瑰饼图

一、玫瑰饼图

 1.新建组件rosechart.vue 

2.写入代码：

<script setup>
import { ref,reactive,onMounted} from 'vue';
import * as echarts from 'echarts';
 
const chart = ref();
onMounted(()=>{
    chartInit()
})
 
// echarts是基于JS的，和vue里面的语法不太一样，不能完全粘贴过来
function chartInit(){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chart.value);
 
    // 指定图表的配置项和数据
    var option = {
        tooltip:{}, //提示框
        series:[
            {
                type:'pie',
                roseType:'area',
                radius:[20,80],  //内半径外半径
                data:[
                    {value:19 ,name:'速度1'},
                    {value:21 ,name:'速度2'},
                    {value:23 ,name:'速度3'},
                    {value:26 ,name:'速度4'},
                    {value:30 ,name:'速度5'},
                    {value:31 ,name:'速度6'},
                ],
                label:{
                    show:true,
                    formatter:'{b} {c} km/h',
                    testStyle:{
                        color:'#fff',
                    }
                }
            }
        ]
    }
    
 
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
 
</script>
 
<template>
    <div class="rose-title">速度</div>
    <!-- 绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器 -->
    <div ref="chart" class = "barchart" style="width: 100%;height:200px;"></div>
 
</template>
 
<style scoped>
.rose-title {
  text-align: left; /* 让文字靠左 */
  font-weight: 600;
  padding: 0 5px;
  margin: 0 0 10px 0; /* 去掉左边2% margin，增加一点底部间距 */
}

</style>

　　

3. 在modelThir.vue 中引入

 4.效果：