ECharts 简单上手

[starryiu]

echarts📊，在使用 echarts 时，理解概念时非常重要的。这也是为什么在官方教程中，没有举出很多例子，而是主讲概念。~原文时间：2020-10-17 23:26~

上手

在使用echarts时，理解概念时非常重要的。 这也是为什么在官方教程中，没有举出很多例子，而是主讲概念。

简单例子

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

<script>
import echarts from 'echarts'
export default {
  mounted() {
    const option = {
      title: {
        text: `ECharts 入门示例`
      },
      tooltip: {},
      legend: {
        data: [`销量`]
      },
      xAxis: {
        data: [`衬衫`, `羊毛衫`, `雪纺衫`, `裤子`, `高跟鞋`, `袜子`]
      },
      yAxis: {},
      series: [
        {
          name: `销量`,
          type: `bar`,
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    echarts.init(this.$refs.main).setOption(option)
  }
}
</script>

基础概念

一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。

系列

一组数值以及他们映射成的图。

const dataset = {
  xAxis: {
    type: `category`
  },
  yAxis: {},
  dataset: {
    source: [
      [`一月`, 23, 12, `XX`],
      [`二月`, 12, 23, `YY`],
      [`三月`, 63, 4, `ZZ`],
      [`四月`, 44, 34]
    ]
  },
  series: [
    {
      type: `pie`,
      center: [`65%`, 60],
      radius: 35,
      encode: { itemName: 3, value: 2 }
    },
    {
      type: `line`,
      encode: { x: 0, y: 1 }
    },
    {
      type: `bar`,
      encode: { x: 0, y: 2 }
    }
  ]
}
const series = {
  xAxis: {
    data: [`一月`, `二月`, `三月`, `四月`]
  },
  yAxis: {},
  series: [
    {
      type: `pie`,
      center: [`65%`, 60],
      radius: 35,
      data: [
        { name: `XX`, value: 52 },
        { name: `YY`, value: 54 },
        { name: `ZZ`, value: 42 }
      ]
    },
    {
      type: `line`,
      data: [3, 1, 2, 4, 6]
    },
    {
      type: `bar`,
      data: [30, 10, 20, 40, 60]
    }
  ]
}

坐标系

const dataset = {
  xAxis: [
    { type: `category`, gridIndex: 0 },
    { type: `category`, gridIndex: 1 }
  ],
  yAxis: [
    { type: `value`, gridIndex: 0 },
    { type: `value`, gridIndex: 1 }
  ],
  grid: [
    {
      top: 40,
      bottom: `58%`
    },
    {
      top: `58%`,
      bottom: 40
    }
  ],
  dataset: {
    source: [
      [`一月`, 23, 12, `XX`, 52],
      [`二月`, 12, 23, `YY`, 54],
      [`三月`, 63, 4, `ZZ`, 42],
      [`四月`, 44, 34]
    ]
  },
  series: [
    {
      type: `pie`,
      center: [`100%`, 40],
      radius: 35,
      encode: { itemName: 3, value: 4 }
    },
    {
      type: `line`,
      encode: { x: 0, y: 2 },
      xAxisIndex: 0,
      yAxisIndex: 0
    },
    {
      type: `line`,
      encode: { x: 0, y: 1 },
      xAxisIndex: 1,
      yAxisIndex: 1
    },
    {
      type: `bar`,
      encode: { x: 0, y: 2 },
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
}

使用主题

使用官方的主题构建工具

选择一个主题，给主题起名字，然后下载为js格式

使用

import './theme/custom'

this.$echarts.init(this.$refs.pieChart, `custom`).setOption(option)