开发者社区开发与运维文章正文

在Vue中使用Echart图表库。【全网最简单】

2023-04-23 123

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在Vue中使用Echart图表库。【全网最简单】

使用npm安装echart

npm install echarts --save

然后在使用的页面上直接import

import echarts from "echarts";

在页面放一个图表渲染的容器

<div id="chart1" style="width:100%;height:376px;background:#fff"></div>

在页面mounted方法中，找个这个id，然后初始化。

this.teacherChart = echarts.init(document.getElementById("chart1"));

然后配置图表要显示的内容

this.teacherChart.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {}
          }
        ]
      });