# 一、快速使用

Apache ECharts (opens new window) 是一个基于 JavaScript 的开源可视化图表库

底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

# 1、引入 Apache ECharts

  • 快速上手
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>
  • 项目中使用

方式 1:(和 axios 类似)

npm install echarts --save
import * as echarts from 'echarts'

// 将echarts对象全局挂载到vue原型对象上
Vue.prototype.$echarts = echarts

方式 2:

  • public / index.html
<body>
  <script src="echarts.js"></script>
</body>
  • main.js
// 将echarts对象全局挂载到vue原型对象上
Vue.prototype.$echarts = window.echarts

# 2、绘制 ECharts 图表

① DOM 容器准备:

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <!-- 方式一: -->
  <div id="main" style="width: 600px;height:400px;"></div>

  <!-- 方式二: -->
  <div id="main"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'))

    myChart.resize({
      width: 800,
      height: 400
    })
  </script>

  <!-- 方式三: -->
  <div id="main"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'), null, {
      width: 600,
      height: 400
    })
  </script>
</body>

② 图表绘制:

  • echarts.init()方法初始化 echarts 实例
  • 编写 option 配置内容
  • setOption()方法生成柱状图
<body>
  <script type="text/javascript">
    // 1、基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))

    // 2、指定图表的配置项和数据
    var option = {
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {
        type: 'value'
      },

      series: [
        {
          name: '销量',
          type: 'bar',
          data: [30, 20, 36, 10, 10, 20]
        }
      ]
    }

    // 3、使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  </script>
</body>

其中,xAxisyAxisseries 为 ✍ 最基础是属性。

结果:

拓展

  ECharts 图表配置项中,xAxisyAxisname 属性可以分别为 x 轴的右侧、y 轴的顶部添加标题。

# 3、ECharts 的配置项 🎈

个人推荐直接查看 ECharts 官网比较快捷

① 速查手册

  使用 ECharts 时,最麻烦的不过于快速使用配置项手册,为此官方为我们提供了一个可视化的可快速定位到配置项手册的页面:

资源 -> 术语速查手册 (opens new window) 🍗

② 组件配置项

  • 表格:
配置项 名称
Title 标题
Legend 图例
Tooltip 提示框
Toolbox 工具栏
series 图表(MarkPoint、MarkLine、MarkArea)
DataZoom 数据区域缩放
VisualMap 视觉映射
  • 图解:

# 二、通用配置

  在 ECharts 的任何图表中都能使用如下配置:

# 1、标题 title

var option = {
  // 1、标题配置
  title: {
    // 文本
    text: '成绩展示',
    textStyle: {
      color: 'red'
    },

    // 边框
    borderWidth: 5,
    borderColor: 'blue',
    borderRadius: 5,

    // 位置
    left: 50,
    top: 10
  }
}

# 2、图例 Legend

var option = {
  // 2、图例配置
  legend: {
    // data属性🚩对应series中的name属性(可以帮助我们对图表进行筛选)
    data: ['语文'], // 管理数据

    icon: 'circle', // 图例形状

    // 图例位置
    top: 'bottom',
    left: 'left',

    // 水平垂直
    orient: 'vertical',

    // 图例大小
    itemWidth: 100,
    itemHeight: 40,

    // 图例样式
    textStyle: {
      color: 'rgba(255,255,255,.5)',
      fontSize: '12'
    }
  }
}

# 3、提示框 Tooltip

var option = {
  // 3、提示框配置
  tooltip: {
    // 指示器配置
    axisPointer: {
      type: 'cross', // cross、shadow、line类型
      crossStyle: {
        color: 'red'
      },
      lineStyle: {
        color: '#dddc6b'
      }
    },

    // 数据显示
    trigger: 'axis', // ① 触发类型: item、axis (show: true和trigger:'item' 效果相同)
    triggerOn: 'click', // ② 触发时机:click、mouseOver
    // ③ 触发格式
    // 方式1
    // 【模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等】
    // formatter: '{b} 的成绩是 {c}',
    // 方式2
    formatter: function (arg) {
      console.log(arg)
      return arg[0].name + '的分数是:' + arg[0].data // 甚至还可以返回 🤔html字符串
    },

    // 提示框背景
    backgroundColor: 'rgba(255,255,255,0.7)'
  }
}

# 4、工具栏 Toolbox

var option = {
  // 4、工具栏配置
  toolbox: {
    feature: {
      saveAsImage: { show: true }, // 导出图片
      dataView: { show: true, readOnly: false }, // 数据视图
      restore: { show: true },, // 重置
      dataZoom: {}, // 区域缩放
      magicType: {
        type: ['bar', 'line']
      } // 动态图表类型的切换
    }
  }
}

# 5、图表配置 🎉

var option = {
  series: [
    {
      name: '语文',
      type: 'bar',
      data: [88, 79, 85, 80, 89, 92],
      // 5-1、标记点
      markPoint: {
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      },
      // 5-2、标记线
      markLine: {
        data: [
          {
            type: 'average',
            name: '平均值'
          }
        ]
      },
      // 5-3、标记区域
      markArea: {
        data: [
          [
            {
              xAxis: '1班'
            },
            {
              xAxis: '2班'
            }
          ],
          [
            {
              xAxis: '5班'
            }
          ]
        ]
      }
    }
  ]
}

# 二、其他配置

# 1、区域缩放(dataZoom)

<script>
  var option = {
    dataZoom: [
      {
        type: 'slider', // 缩放的🚩类型  slide代表滑块  inside代表依靠鼠标滚轮
        // type: 'inside'
        xAxisIndex: 0
      },
      {
        type: 'slider',
        yAxisIndex: 0
        // start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
        // end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
      }
    ],
    // 拓展:
    dataZoom: {
      show: false,
      startValue: this.startValue,
      endValue: this.endValue
    }
  }
</script>

# 2、视觉映射(visualMap)

<script>
  var option = {
    visualMap: {
      min: 15202,
      max: 159980,
      dimension: 1,
      orient: 'vertical',
      right: 10,
      top: 'center',
      text: ['high', 'low'],
      calculable: true,
      inRange: {
        color: ['#f231a', '#24b7f2']
      }
    }
  }
</script>

# 3、直角坐标系(grid)

<script>
  var option = {
    grid: {
      show: true, // 是否可见
      borderWidth: 10, // 边框的宽度
      borderColor: 'red', // 边框的颜色
      left: 120, // 边框的位置
      top: 120,
      width: 300, // 边框的大小
      height: 150,

      containLabel: true // 包含🤔坐标轴上的文字
    }
  }
</script>

# 4、数据集(dataset)

  虽然每个系列都可以在 series.data 中设置数据,但是从 ECharts4 支持数据集开始,更推荐使用数据集来管理数据。

  • series.data 方式
option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
}
  • dataset 方式
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴,数值轴。
  yAxis: {},
  // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}
更新于 : 7/8/2024, 10:21:14 AM