vue3中使用vue-charts和v-charts

一、vue-echarts

echarts官方专门为vue做的封装。
github vue-echarts
在vue3中使用：

vue3中使用vue-echarts

1、安装

$ npm install echarts vue-echarts

2、使用

main.js

import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core";

// 手动引入 ECharts 各模块来减小打包体积
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

const app = createApp(...)

// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)

app.mount(...)

demo.vue

<template>
    <div class="home">
        <v-chart
        class="vuechart"
        :option="data"
        width="100"
        height="100"
         />
    </div>

</template>
<script setup>
import { ref } from 'vue'
const data = ref({
      title: {
        text: "Traffic Sources",
        left: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
      },
      series: [
        {
          name: "Traffic Sources",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: 335, name: "Direct" },
            { value: 310, name: "Email" },
            { value: 234, name: "Ad Networks" },
            { value: 135, name: "Video Ads" },
            { value: 1548, name: "Search Engines" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    })
</script>
<style>
.vuechart{
    height:400px;
}
</style>

在组件中使用。

在组件中简单使用。

简单使用

<template>
    <div class="home">
        <v-chart
        class="vuechart"
        :option="data"
         />
    </div>

</template>
<script setup>
import { ref } from 'vue'
const data = ref({
    title: {
        text: "Traffic222 Sources",
        left: "center"
    },
    xAxis:{
        type:'category'
    },
    yAxis:{
        type:'value'
    },
    series:[{
        type:'line',
        data:[100,200,20,500,600]
    }]
})
</script>
<style>
.vuechart{
    height:400px;
}
</style>

3、举例

vue-charts绘制散点图雷达图

<template>
    <div class="bmap_container">
        <v-chart :option="options" />
    </div>
</template>
<script setup>
import { onMounted,reactive } from 'vue'
import 'echarts/extension/bmap/bmap'
import mystyleJson from '../assets/mystyle.js'
let options = reactive({})
onMounted(()=>{
    options.title = {
        text:'外卖销售数据大盘',
        subtext:'销售趋势统计',
        sublink:'http://www.baidu.com',
        left:'center'
    }
    options.bmap={
        key:'iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ',
        center:[104.114129,37.550339],
        zoom:5,
        roam:false,
        mapStyle:{
            styleJson:mystyleJson
        }
    }
    let testPoint = [{
        name:'海门',
        value:[121.15,31.89,80]
    },{
        name:'南京',
        value:[118.78,32.04,100]
    }]
    let testPoint2 = [{
        name:'北京',
        value:[116.404188,39.917565,250]
    },{
        name:'上海',
        value:[121.487439,31.237411,130]
    }]
    options.tooltip = {}
    options.series=[{
        name:'销售额',
        type:'scatter',
        coordinateSystem:'bmap',
        data:testPoint,
        encode:{
            value:2
        },
        itemStyle:{
            color:'purple'
        },
        symbolSize:function(val){
            return val[2]/10
        },
        label:{
            show:false,//值为false时需将emphasis设置为true，鼠标划上会显示
            position:'right',
            formatter:function(v){
                return `${v.data.name} - ${v.data.value[2]}`
            }
        },
        emphasis:{
            label:{
                show:true
            }
        }
    },{
        name:'top2',
        type:'effectScatter',
        coordinateSystem:'bmap',
        data:testPoint2,
        encode:{
            value:2
        },
        itemStyle:{
            color:'purple'
        },
        symbolSize:function(val){
            return val[2]/10
        },
        label:{
            show:true,
            position:'right',
            formatter:function(v){
                return `${v.data.name} - ${v.data.value[2]}`
            }
        },
        hoverAnimation:true,
        rippleEffect:{//添加该属性后，水韵纹会变成线圈
            brushType:'stroke'
        },
        itemStyle:{
            color:'red',
            shadowBlur:20,
            shadowColor:'#333'
        }
    }]
})

</script>
<style scoped>
.bmap_container{
    width:100%;
    height:100%;
}
</style>

二、v-charts

element-ui官方为echarts做的封装。

在使用echarts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts的出现正是为了解决这个痛点。基于Vue2.0和echarts封装的v-charts图标组件，只需要统一提供一种对前后端都有好的数据格式设置简单的配置项，便可轻松生成常见的图表。

但目前仍不支持vue3