vue + echarts

echarts官网配置项手册、vue-echarts github链接

1.安装

npm i v-charts echarts -save

2. 按需导入需要使用的组件

import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
import { BarChart, LineChart } from 'echarts/charts'

import {
  TitleComponent,
  LegendComponent,
  LegendScrollComponent,
  GridComponent,
  DatasetComponent,
  TooltipComponent,
} from 'echarts/components'

use([
  SVGRenderer,
  CanvasRenderer,
  BarChart,
  LineChart,
  GridComponent,
  TitleComponent,
  DatasetComponent,
  TooltipComponent,
])

3. 在man.js中注册全局组件

import { createApp } from 'vue'
const app = createApp(App)
app.component('VChart', VChart)

4. 使用，需要给其容器设置固定宽高

<template>
  <div class="w-96 h-96">
    <v-charts :option="chartData" autoresize></v-charts>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const chartData = reactive({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          type: 'solid',
        },
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        splitLine: {
          lineStyle: {
            type: 'solid',
          },
        },
        data: ,
      },
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
    ],
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        showSymbol: false,
        areaStyle: {
          opacity: 0.2,
        },
        lineStyle: {
          width: 1,
        },
        data: [
          520, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210,
          120, 132, 101, 134, 90, 230, 210, 120, 132, 200,
        ],
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        showSymbol: false,
        areaStyle: {
          opacity: 0.2,
        },
        lineStyle: {
          width: 1,
        },
        data: [
          220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310,
          220, 182, 191, 234, 290, 330, 310, 220, 182, 191,
        ],
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        showSymbol: false,
        areaStyle: {
          opacity: 0.2,
        },
        lineStyle: {
          width: 1,
        },
        data: [
          150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410,
          150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
        ],
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        showSymbol: false,
        areaStyle: {
          opacity: 0.2,
        },
        lineStyle: {
          width: 1,
        },
        data: [
          320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320,
          320, 332, 301, 334, 390, 330, 320, 320, 332, 301,
        ],
      },
    ],
  })
</script>