Vue---Echarts

stu_kk2023-12-03 23:34

项目需要用echarts来做数据展示，现记录vue3引入并使用echarts的过程。

1. 使用步骤

  1. 安装 ECharts：使用 npm 或 yarn 等包管理工具安装 ECharts。

    diff 复制代码 
    npm install echarts
```

  2. 在 Vue 组件中引入 ECharts：在需要使用图表的 Vue 组件中，引入 echarts 模块。

    TypeScript 复制代码 
    import * as echarts from 'echarts';
```

  3. 创建图表容器：在组件的模板中创建一个容器元素，用于渲染图表。

    html 复制代码 
    <template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
```

  4. 在组件的 setup 函数中，获取图表容器的 DOM 元素，并创建图表实例。

    TypeScript 复制代码 
    import { ref, onMounted } from 'vue';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);
        // 在 chartInstance 上进行图表的配置和数据处理
      }
    });

    return {
      chartContainer,
    };
  },
};
```

在 `setup` 函数中，我们使用 `ref` 创建了一个响应式的 `chartContainer` 变量来引用图表容器的 DOM 元素。

在 `onMounted` 钩子函数中，我们可以获取到图表容器的 DOM 元素，并使用 `echarts.init` 方法创建图表实例。接下来，你可以在 `chartInstance` 上进行图表的配置和数据处理。

  5. 配置和绘制图表：在 chartInstance 上进行图表的配置和数据处理，然后调用 chartInstance.setOption 方法将配置应用到图表上。

    TypeScript 复制代码 
    import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);

        const options = {
          // 图表的配置项和数据
          // 可根据 ECharts 的文档和示例进行配置
          // 例如：title、xAxis、yAxis、series 等配置项
        };

        chartInstance.setOption(options);
      }
    });

    return {
      chartContainer,
    };
  },
};
```

在 `options` 对象中，你可以根据 ECharts 的文档和示例配置图表的各种选项，例如标题、坐标轴、系列数据等。然后，使用 `chartInstance.setOption` 方法将配置应用到图表上。

  6. 在模板中渲染图表容器：在组件的模板中使用 v-bind 将图表容器绑定到 chartContainer 变量。

    html 复制代码 
    <template>
  <div v-bind:ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
```

这样，图表容器就会被渲染出来，并在 `onMounted` 钩子函数中初始化和绘制图表。

然后可以根据 ECharts 的文档和示例，进一步配置和定制图表，接下来是常见的图表使用。

2. 常见图表使用

2.1. 折线图（Line Chart）
html 复制代码 
<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);

        const options = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              type: 'line',
              data: [120, 200, 150, 80, 70, 110, 130],
            },
          ],
        };

        chartInstance.setOption(options);
      }
    });

    return {
      chartContainer,
    };
  },
};
</script>
2.2. 柱状图（Bar Chart）
html 复制代码 
<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);

        const options = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              type: 'bar',
              data: [120, 200, 150, 80, 70, 110, 130],
            },
          ],
        };

        chartInstance.setOption(options);
      }
    });

    return {
      chartContainer,
    };
  },
};
</script>
2.3. 饼状图（Pie Chart）
html 复制代码 
<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);

        const options = {
          series: [
            {
              type: 'pie',
              data: [
                { value: 335, name: 'Direct' },
                { value: 310, name: 'Email' },
                { value: 234, name: 'Affiliate' },
                { value: 135, name: 'Video Ads' },
                { value: 1548, name: 'Search Engine' },
              ],
            },
          ],
        };

        chartInstance.setOption(options);
      }
    });

    return {
      chartContainer,
    };
  },
};
</script>
2.4. 散点图（Scatter Chart）
html 复制代码 
<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);

        const options = {
          xAxis: {},
          yAxis: {},
          series: [
            {
              type: 'scatter',
              data: [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68],
              ],
            },
          ],
        };

        chartInstance.setOption(options);
      }
    });

    return {
      chartContainer,
    };
  },
};
</script>
2.5. 雷达图（Radar Chart）
html 复制代码 
<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);

        const options = {
          radar: {
            indicator: [
              { name: 'Sales', max: 6500 },
              { name: 'Administration', max: 16000 },
              { name: 'Information Technology', max: 30000 },
              { name: 'Customer Support', max: 38000 },
              { name: 'Development', max: 52000 },
              { name: 'Marketing', max: 25000 },
            ],
            series: [
              {
                type: 'radar',
                data: [
                  {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: 'Allocated Budget',
                  },
                  {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: 'Actual Spending',
                  },
                ],
              },
            ],
          },
        };

        chartInstance.setOption(options);
      }
    });

    return {
      chartContainer,
    };
  },
};
</script>
2.6. 面积图（Area Chart）
html 复制代码 
<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);

        const options = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              type: 'line',
              areaStyle: {},
              data: [820, 932, 901, 934, 1290, 1330, 1320],
            },
          ],
        };

        chartInstance.setOption(options);
      }
    });

    return {
      chartContainer,
    };
  },
};
</script>
2.7. 仪表盘（Gauge Chart）
html 复制代码 
<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);

        const options = {
          series: [
            {
              type: 'gauge',
              detail: { formatter: '{value}%' },
              data: [{ value: 50, name: 'Completion Rate' }],
            },
          ],
        };

        chartInstance.setOption(options);
      }
    });

    return {
      chartContainer,
    };
  },
};
</script>
2.8. 漏斗图（Funnel Chart）
html 复制代码 
<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chartContainer.value) {
        const chartInstance = echarts.init(chartContainer.value);

        const options = {
          series: [
            {
              type: 'funnel',
              data: [
                { value: 60, name: 'Step 1' },
                { value: 40, name: 'Step 2' },
                { value: 20, name: 'Step 3' },
                { value: 80, name: 'Step 4' },
                { value: 100, name: 'Final Step' },
              ],
            },
          ],
        };

        chartInstance.setOption(options);
      }
    });

    return {
      chartContainer,
    };
  },
};
</script>
相关推荐
范文杰3 分钟前
AI 时代如何更高效开发前端组件？21st.dev 给了一种答案
前端·ai编程
拉不动的猪11 分钟前
刷刷题50（常见的js数据通信与渲染问题）
前端·javascript·面试
拉不动的猪20 分钟前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy1 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom2 小时前
Astro 框架：快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom2 小时前
了解Nest.js和Next.js：如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
React与Next.js：基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架：性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器：npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南：官方接口配置+15个实用提示词【保姆级教程】
前端
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07如何本地部署AI智能体平台，带你手搓一个AI Agent08苍穹外卖面试总结09DeepSeek RAGFlow构建本地知识库系统10【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】