Echarts-vue项目(1)快速入门

最新推荐文章于 2024-09-05 09:52:45 发布

学无止境QAQ

最新推荐文章于 2024-09-05 09:52:45 发布

阅读量241

点赞数

分类专栏： ECharts项目文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/qq_46368050/article/details/125236272

版权

ECharts项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

官方文档:Documentation - Apache ECharts

gitee仓库地址获取完整代码(第一天素材中)https://gitee.com/CMD-UROOT/echarts/tree/master/online-retailers-master

ECharts的基本使用

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="lib/echarts.min.js"></script>
  <!-- 
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象
   -->
</head>

<body>
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置(呈现到div里面)
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    var option = {
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: [70, 92, 87]
        }
      ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>

</html>