Vue3使用ECharts入门示例

Apache ECharts介绍

一个基于 JavaScript 的开源可视化图表库。官方网址

使用示例

第一步：NPM 安装 ECharts

npm install echarts --save

第二步：使用 ECharts

<template>
    <div ref="main" style="height: 400px;"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const main = ref()
const tu = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(main.value);
    // 绘制图表
    myChart.setOption({
      tooltip:{},
      legend:{},
      series: [
        {
          type: 'pie',
          tooltip: {
            formatter: '{b}: {c} ({d}%)',
          },
          data: [
	        {
	          value: 335,
	          name: '直接访问'
	        },
	        {
	          value: 234,
	          name: '联盟广告'
	        },
	        {
	          value: 1548,
	          name: '搜索引擎'
	        }
	      ]
        }
      ]
    });
}

onMounted(() => {
  tu()
})
</script>