Vue中使用echarts

   日期:2020-11-13     浏览:138    评论:0    
核心提示:@[Hgiao] (Vue中使用echarts )第一步:目录下使用命令行,初始化工程的 npm 环境并安装 echarts(这里前提是您已经安装了 npm)://npm npm install echarts --save第二步:Html// html<template> <div style="width: 600px; height: 400px"> <div ref="tu" style="width: 600px; hei

@[Hgiao] (Vue中使用echarts )

第一步:目录下使用命令行,初始化工程的 npm 环境并安装 echarts(这里前提是您已经安装了 npm):

//npm
 npm install echarts --save

第二步:Html

// html
<template>
  <div  style="width: 600px; height: 400px">
    <div ref="tu" style="width: 600px; height: 400px"></div>
  </div>
</template>`

第三步:script

//
<script>
import echarts from "echarts";
export default { 
  data() { 
    return { 
      options: [],
    };
  },
  mounted() { 
    this.echartsInit();
  },
  methods: { 
    echartsInit() { 
      echarts.init(this.$refs.tu).setOption(
      //以下内容可以在https://echarts.apache.org/examples/zh/index.html
      //里面选取你想要的类型,粘贴即可
      { 
        xAxis: { 
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: { 
          type: "value",
        },
        series: [
          { 
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      }
      
      );
    },
  },
};
</script>




 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服