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>
相关推荐
橙光成长41 分钟前
PDF离线工具箱深度解析：4MB纯前端单文件，40+功能全本地运行，文件绝不上传
前端·pdf·1024程序员节
小poop7 小时前
CSS 基础与实战：从入门到精通网页美化
前端
Csvn9 小时前
运行时性能
前端
Never_every999 小时前
位图转矢量工具哪个好？实测抠抠图AI位图转矢量工具
大数据·前端
paopaokaka_luck10 小时前
宠物门店经营管理系统（销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算）
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
空中湖10 小时前
用 React 写数据大屏：为什么我不建议用图表库
前端·react.js·前端框架
欣欣之王来了12 小时前
原始HTML插值：v-html指令的使用与安全风险
前端·学习·架构·项目·vue3教程
IT_陈寒12 小时前
Redis的LRU淘汰策略坑了我一整天
前端·人工智能·后端
计算机魔术师12 小时前
砍半价格、参数再涨，国产旗舰追到 Opus 鼻尖了
前端
paopaokaka_luck12 小时前
心理咨询管理系统（WebSocket实时沟通、基于用户的协同过滤、 ECharts多维分析、 预约业务流程、预约校验与定时处理）
java·vue.js·spring boot·mysql·spring·echarts·1024程序员节
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05几个好用的ip纯净度检测网站06苹果iPA游戏软件资源下载网站07ai安全工具:CyberStrikeAI安装部署与使用08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10乙二醇水溶液物性参数