vue3 echart代码示例

官方安装npm install echarts —save

https://echarts.apache.org/

<template>
  <div>
    <div class="chart" id="main" ></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from 'vue';
onMounted(()=>{
  initEcharts()
})
function initEcharts() {
  // 基本柱状图
  const option = {
    xAxis: {
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {},
    series: [
      {
        type: "bar", //形状为柱状图
        data: [23, 24, 18, 25, 27, 28, 25]
      }
    ]
  };
  const myChart = echarts.init(document.getElementById("main"));
  myChart.setOption(option);
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
</script>
<style scoped>
.chart {
  height: 100vh;
}
</style>

npm install echarts vue-echarts//安装插件

https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.md

vue-echarts属于二次封装

<template>
  <v-chart class="chart" :option="option" autoresize />
</template>
<script setup>
import { use } from 'echarts/core';// 挂载组件方法
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';// 引入图类型
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';// 相关组件
// InjectionKey 引入
// THEME_KEY 主题关键字
// UPDATE_OPTIONS_KEY 刷新画布关键字
import VChart, { THEME_KEY,UPDATE_OPTIONS_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
// 挂载
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
provide(THEME_KEY, 'dark');// 主题颜色
const option = 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 scoped>
.chart {
  height: 100vh;
}
</style>