Echarts的代码是在哪里写的

Echarts的代码主要是在前端开发环境中编写和执行的。具体写在网页文件里，通常这是一个HTML文档或者一个JavaScript脚本文件。在网页中使用Echarts通常分为几个步骤：首先，必须在HTML文件中引入Echarts库的脚本链接；然后，在HTML文档的body部分创建一个用于渲染图表的DOM元素，通常是一个div容器；最后，在JavaScript中编写相应的Echarts配置代码，通过Echarts的API将图表实例化并绑定到前面创建的DOM元素上。该过程涉及到HTML标记、JavaScript编程和Echarts API的运用，需要开发者具备一定的前端技术栈知识。

一、ECHARTS简介

Echarts是一个使用JavaScript 实现的开源可视化库，它可以在浏览器中展示丰富多样、交互性强的数据图表。由于其出色的性能和高度的可定制性，Echarts受到了众多开发者的喜爱与广泛应用。

Echarts的核心特点在于它高度“数据驱动”。开发者通过向Echarts提供一个包含数据和配置选项的对象，即可生成图表。Echarts的灵活性体现在它能够通过JSON格式的配置项扩展图表的功能和样式。

二、ECHARTS环境搭建

要开始使用Echarts，首要任务是搭建前端开发环境。环境搭建过程如下：

准备HTML页面：建立一个基本的HTML5文档，它将是Echarts图表的载体。
引入Echarts库：可以通过CDN引入或下载到本地后引入Echarts的JavaScript库。

<!-- 通过CDN引入Echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

或者将Echarts库的文件下载到本地项目目录，然后通过相对路径的方式引入。

三、HTML中容器的设置

在HTML文档的body部分，需要指定一个div元素作为Echarts图表的容器。容器需要定义一个独特的id，它将用来在后续的JavaScript代码中被识别和选择。

<!-- Echarts图表的容器 -->
<div id="mAIn" style="width: 600px;height:400px;"></div>

这个容器的尺寸可以通过样式来控制，Echarts将会在这个div元素内生成相应的图表。

四、ECHARTS配置和使用

接下来，需要编写JavaScript代码来处理图表的生成。在同一个HTML文件中（通常在body结束标签之前）或者在一个单独的JavaScript文件中编写如下代码：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
    // 图表标题
    title: {
        text: 'Echarts 入门示例'
    },
    // 图例组件
    legend: {
        data:['销量']
    },
    // X轴设置
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    // Y轴设置
    yAxis: {},
    // 数据系列
    series: [{
        name: '销量',
        type: 'bar', // 这里定义了series的类型为柱状图
        data: [5, 20, 36, 10, 10, 20]
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);