首页 > 其他 > 详细

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

时间:2019-11-17 21:50:20      阅读:99      评论:0      收藏:0      [点我收藏+]

使用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: {}
          }
        ]
      });

刷新浏览器,就显示出来图表了。

技术分享图片

 

 一个月前我还是Angular粉,现在觉得Vue真香


 

有问题欢迎加入QQ群一起讨论 群号: 545594312

也可以扫一扫进群

技术分享图片

 

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

原文:https://www.cnblogs.com/boxrice/p/11878206.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!