初识ECharts

Echarts使用五步曲(以折线图为例)

1、下载并引入

（1）下载网址：https://echarts.apache.org/v4/zh/download.html

（2）找一个比较稳定的版本，点击Dist，进入github页面，下载代码压缩文件

（3）将下载的代码压缩文件进行解压，将dist文件夹中的echarts.min.js引入到html页面中

<script src="放置路径/echarts.min.js"></script>

2、准备一个DOM容器

（1）准备容器


<body>
    <div class="box"></div>
</body>

（2）为容器设置样式

/* 准备的容器大小设置 */
.box {
    width: 400px;
    height: 400px;
}

3、初始化echarts实例对象（这里开始写js啦）

var myChart = echarts.init(document.querySelector('.box'))

4、指定配置项和数据

（1）配置项整体为一个对象变量

var option = {}

（2）option常见的9个配置项

color 可设置调色盘颜色列表，是一个数组，此处为不同折线的颜色

color: ['red', 'orange']

title 简单设置图表的标题

title: {
      text: '广告一周相关数据'
}

tooltip 指示器，鼠标移上可以显示数据

tooltip: {
      // 触发方式：axis 坐标轴触发（多用于折线图、柱状图等）｜item  数据项触发（多用于散点图、饼图等）
      trigger: 'axis'
}

legend 图例，就是指明哪一个颜色代表哪一个数据

legend: {
    // 图例数据
    data: ['邮件营销', '联盟广告'],
    // 图例距容器左侧以及右侧的距离，百分比以容器为基准
    left: '40%',
    right: '10%'
}

grid 网格，也就是直角坐标系上面形成的网格

grid: {
    // 网格组件距容器边框的距离
    left: '3%',
    right: '3%',
    bottom: '3%',
    // 网格区域属否包含坐标轴的刻度标签
    containLabel: true
}

toolbox 工具箱，一般在图标的右上角，有几个小功能

toolbox: {
        // 工具配置
    feature: {
            // 将图标保存为图片
        saveAsImage: {
            type: 'png',  //  保存为png格式
            title: '保存'  //  鼠标移上图标显示的文字
        }
    }
}

xAxis 直角坐标系的x轴

xAxis: {
   // 设置x轴的类型：category 类目值
   type: 'category',
   // 坐标轴两侧是否要留空白
   boundaryGap: false,
   // x轴的类目数据
   data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}

yAxis 直角坐标系的y轴

yAxis: {
    type: 'value',
    max: 2800,   //  设置y轴数据的最大数值
    min: 10,   
    splitNumber: 2  //  将y轴分为2段网格
}

series 系列列表，每个系列通过type设置自己的图表类型

/**
  * 图表类型type: line(折线图),pie（饼图）
  * name:用于图例的展示
  * data:数据（数组） 若干个数据
  * stack:数据堆叠
  *      数据堆叠：每个值都是自身跟前一个值加起来的结果
  *      如果直接去掉stack或者不设置同样的数据，可以不发生数据堆叠
  */
series: [{
    name: '邮件营销',
    type: 'line',
    // stack: '总量',
    data: [120, 132, 101, 134, 90, 230, 210]
}, {
    name: '联盟广告',
    type: 'line',
    // stack: '总量',
    data: [220, 182, 191, 234, 290, 330, 310]
}]

5、将配置项给echarts实例对象

myChart.setOption(option)

最终效果来啦：

1620908704554.jpg

最后编辑于：2021.05.13 20:34:12