vue项目中引入echarts

àì夳堔傛蜴生んèń 2022-09-10 02:14 447阅读 0赞

关于如何搭建vue项目，引入vue-router和vuex。
请移步
vue项目中引入vue-router

vue项目中引入vuex

本章着重介绍对于echarts的相关引入

引入Echarts制作图表

在这里插入图片描述

获取，安装echarts
在html 设置一个容器
调用echarts.init方法进行初始化
调用初始化的实例的setOption来配置数据

  1. npm install echarts --save
  3. //echarts容器
  4. <div id="myChart" :style="{ width: '600px', height: '600px' }"></div>
  6. //获取以上的mychart 节点
  7. let myChart = this.$echarts.init(document.getElementById("myChart"));

https://echarts.apache.org/examples/zh/index.html echarts官网示例的demo
选取一个设置option

  1. var option = { 
  2.         xAxis: { 
  3.           type: "category",
  4.           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  5.         },
  6.         yAxis: { 
  7.           type: "value",
  8.         },
  9.         series: [
  10.           { 
  11.             data: [150, 230, 224, 218, 135, 147, 260],
  12.             type: "line",
  13.           },
  14.         ],
  15.       };
  16.       // 使用刚指定的配置项和数据显示图表。
  17.       myChart.setOption(option);

以达到option数据提供的图形效果

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读