【前端 Echarts】小白初步学习小结Echarts基本使用

小结基本使用

• 下载并引入  
  https://github.com/apache/incubator-echarts/tree/4.5.0  
  dist/echarts.min.js

• DOM容器（自定义id或者类）
   

  <div id="main" style="width: 600px;height:400px;"></div>

• 初始化echarts实例对象（通过id或者类获取DOM容器）
   

  var myChart = echarts.init(document.getElementById('main'));

• 指定配置项和数据（option，参考echarts官网，选择想要的图表样式，根据设计图修改设计自己的）
   

  Apache ECharts

  Examples - Apache ECharts

  Documentation - Apache ECharts

  var option = {
      xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
      }]
  };

• 将配置项设置给echarts实例对象
   

  myChart.setOption(option);

小结基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

• series

  • 系列列表。每个系列通过 type 决定自己的图表类型

  • 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

• xAxis：直角坐标系 grid 中的 x 轴

  • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

• yAxis：直角坐标系 grid 中的 y 轴

• grid：直角坐标系内绘图网格。

• title：标题组件

• tooltip：提示框组件

• legend：图例组件

• color：调色盘颜色列表

  数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

以下是学习过程中的一些笔记

黑马

 

 

 

 

 

 

 

 

 配置小积累

ECharts 使用series.itemStyle.color设置柱状图颜色透明渐变 - 灰信网（软件开发博客聚合）

虚线

 Documentation - Apache ECharts

echart 图表 柱状图设置圆角，图例设置为圆形，图例距离_蓝胖子的多啦A梦的博客-CSDN博客_vue项目搭建

echart 图表 柱状图设置圆角，图例设置为圆形，图例距离

饼状图

21_饼图的常见效果_哔哩哔哩_bilibili

 

图标竖向排列

 

Handbook - Apache ECharts

动态数据

异步数据加载

Echarts-异步数据加载_哔哩哔哩_bilibili