vue中使用echart及常见问题

最新推荐文章于 2025-02-20 14:30:00 发布

a_passing_traveller

最新推荐文章于 2025-02-20 14:30:00 发布

阅读量432

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 第三方应用文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/a_passing_traveller/article/details/105006822

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

第三方应用

2 篇文章

订阅专栏

本文详细介绍如何使用ECharts创建动态图表，包括安装、基本配置及数据实时更新等实用技巧，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本使用

安装

npm install echarts

创建实例(实现一个简单的柱形图)

<!--为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="width: 600px;height:400px;"></div>

mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      color: ["#3398DB"],
      title: {
        text: "进六个月访问量"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      yAxis: [
        {
          type: "value"
        }
      ],
      xAxis: {
        data: ["1月", "12月", "3月", "4月", "5月", "6月"]
      },
      series: [
        {
          name: "次数",
          type: "bar",
          data: [125, 200, 361, 170, 784, 548]
        }
      ]
    });
  }

更多参数配置可以访问官方文档

常见问题

实现数据的实时更新：可以根据自己的业务使用定时器或者webscoket实现数据的实时更新。
自适应问题：

window.onresize = function() {
      myChart.resize()
    }

3.引入地图：echarts自带中国地图，引入后设置series即可。

import "echarts/map/js/china";
<!--option中同时设置series的type为map，map为china（这里我们以中国地图为例）-->