vue3.0 + echart可视化

案例1：

案例代码

<template> 
  <div ref="test" style="width:800px;height:600px;"></div>
</template>

<script>
import * as echart from 'echarts'
import {ref,onMounted } from 'vue'
export default {

  name: 'Echart1',
  setup(){
        let test=ref(null);//获取div元素，这里与vue2.x的写法不一样了
        let myChart=null;

        function pie(){
            myChart.setOption({
                 title:{
                     text:"这是一个饼图！",
                     textStyle:{
                        color:"red",
                        fontStyle:"oblique",
                     },
                 },
                 series:{
                     type:'pie',
                      data:[
                           {
                             name:"pie1",
                             value:200
                           },
                           {
                              name:"pie2",
                              value:210
                           },
                           {
                              name:"pie3",
                              value:150
                           },
                           {
                              name:"pie4",
                              value:20
                           },
                           {
                              name:"pie5",
                              value:50
                           },
                           {
                              name:"pie6",
                              value:100
                           }
                           ]
                 }

            })
        }


        onMounted(()=>{
             myChart=echart.init(test.value);
             pie()
        })


        return {
            test//test变量必须要写，如果没写，就拿不到div元素
        }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

效果图

案例2

代码

1. 编写hooks文件

import * as echart from 'echarts'

export default function(div,option){
    let chart=echart.init(div);
    chart.setOption(option);
    return chart;
}

2. 编写echart主要代码

<template>
<div ref="radar" style="width:800px;height:600px;"></div>
</template>

<script>
import useEcharts from '../hooks/useEcharts'
import {ref,reactive,onMounted}  from "vue"

export default {
  name: 'Radar',
  setup(){
    let radar=ref(null);
    let myChart=null;

    let option=reactive({
          title:{
            text:"这是一个雷达图的测试",
            textStyle:{
                fontStyle:"oblique",
                fontSize:20,
                color:'red'
            },
            left:"center"
          },
          legend:{
              orient:"vertical",
              left:'20%',
              data:["测试数据","图例测试"]
          },
         radar:{
            indicator:[
                {name:"1",max:1000},
                {name:"2",max:1000},
                {name:"3",max:1000},
                {name:"4",max:1000},
                {name:"5",max:1000},
            ],
            axisName:{
                show:true
            }
         },
         series:{

            type:"radar",
            areaStyle: {},
            data:[{
                name:"测试数据",
                value:[100,200,223,490,980]
            },
            {
                name:"图例测试",
                value:[400,400,33,290,880]
             }
             ]
         }


    })
    onMounted(()=>{
        myChart=useEcharts(radar.value,option);
    })

    return {
        radar,
        myChart,
        option
    }

  }

}
</script>

<style>

</style>

效果图