echarts插件使用步骤

最新推荐文章于 2025-01-08 16:51:13 发布

m0_63758097

最新推荐文章于 2025-01-08 16:51:13 发布

阅读量437

点赞数 9

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_63758097/article/details/136976121

版权

步骤一：在官网下载（下载 - Apache ECharts）

步骤二：在vscode中新建html文件定义一个存放图表的容器，引入Echarts.js文件

 <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
  </style>


<body>
  <!-- 1·定义一个容器（注意一定要设置宽高哦，不然怎么把图表塞进去呢） -->
  <div class="box"></div>
  <!-- 2·引入js文件 -->
  <script src="./js/echarts.min.js"></script>
  <script>
    //3·初始化echarts实例对象，把获取到的标签传进去（意思是告诉echarts：你的表格等一下就放里面好了）
    var myChart = echarts.init(document.querySelector('.box'))
    //4·在官网上获取想要图表的配置项和数据
    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };
    // 5.将配置项设置给charts实例对象
    myChart.setOption(option)
  </script>

获取图表的网址：Examples - Apache ECharts

结果如下：