Lesson_01_HelloECharts

龍天下丿

已于 2022-06-06 10:37:42 修改

阅读量134

点赞数

分类专栏： Echarts 文章标签： echarts 前端 javascript

于 2022-06-06 10:21:30 首次发布

本文链接：https://blog.csdn.net/oHappyKing12/article/details/125141485

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

ECharts基本使用步骤
第一个实例
- index.html文件：
- index.js文件

ECharts基本使用步骤

下载并引用echarts.js文件
准备一个具备大小的DOM容器
初始化echarts实例对象
指定配置项和数据
将配置项设置给echarts实例对象

第一个实例

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Echarts</title>
</head>
<body>
	<!-- 准备一个具备大小的DOM容器  -->
    <div id="main" style="width:400px;height:300px;"></div>
    <script src="lib/echarts.js"></script>
    <script src="index.js"></script>
</body>
</html>

index.js文件

// 初始化echarts实例对象
// 初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));

// 指定配置项和数据
var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子',"dddd"]
    },
    yAxis: {}, 
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20,10]
      } 
    ]
  }

// 将配置项设置给echarts实例对象
myChart.setOption(option);