一、Echart 数据

1、后端数据

  不管 ECharts 图表多么复杂，其实后端传的数据不过也就 id、名称、数据几个字段即可。

数据示例

{
  "code": 0,
  "data": [
    {
      "id": 2
      "address": "上海",
      "count": 534523
    },
    {
      "id": 5
      "address": "杭州",
      "count": 435343
    },
    {
      //
    }
  ]
}

2、加载 与 更新

传统示例

// 1、数据加载
var option
var myChart = echarts.init(document.getElementById('main'))
let initCharts = () => {
  option = {
    // ……
  }
  if (option && typeof option === 'object') {
    myChart.setOption(option) //  设置 echarts 数据
  }
  window.addEventListener('resize', myChart.resize) // 图表大小自适应
}

// ……

// 2、数据更新
axios.get('./data.json').then((res) => {
  // ……

  var option = {}
  myChart.setOption(option) // 更新 echarts 数据
})

<script setup lang="ts">
import type { EChartsOption } from 'echarts'

const echartRef = ref<HTMLElement>()
const props = defineProps<{ option: EChartsOption }>()

onMounted(() => {
  // 1.初始化echarts实例
  const echartInstance = echarts.init(echartRef.value!, 'light', {
    renderer: 'canvas'
  })

  // 2.第一次进行setOption
  // watchEffect监听option变化, 重新执行
  watchEffect(() => echartInstance.setOption(props.option))

  // 3.监听window缩放（优化：节流、销毁）
  window.addEventListener('resize', () => {
    echartInstance.resize() // Echart缩放
  })
})
</script>

一、直角坐标系图表

  通过 ECharts 官方文档的示例部分，我们可以发现 ECharts 支持了绝大部分的图表类型。

图表	应用场景
柱状图（bar）	描述分类数据
线性图（line）	描述变化趋势
散点图（scatter/effectScatter）	描述不同维度数据之间的相关性

  关于 xAxis、yAxis 的 横纵方向问题 ，

TIP

重点关注type: 'category'和type: 'value'即可。

堆叠图（stack）

  可用于柱状图、折线图等

<script>
  var option = {
    series: [
      {
        type: 'line',
        data: [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600],
        // 堆叠图的设置：all、total
        stack: 'all',
        areaStyle: {}
      },
      {
        type: 'line',
        data: [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200],
        stack: 'all',
        areaStyle: {} // 颜色填充
      }
    ]
  }

1、柱状图 -- bar ✨

var option = {
  xAxis: {
    // 指示器类型
    axisPointer: {
      show: 'true',
      type: 'shadow' // shadow、line、none
    },

    // x轴文本是否显示
    axisLabel: {
      show: false
    }
  },
  yAxis: {
    // 配置✨
    min: 5,
    max: 50,

    // 柱🎈翻转
    inverse: true,

    // y轴文本是否显示
    axisLabel: {
      formatter: '{value} k'
    },

    // y轴线条是否显示
    axisLine: {
      show: false
    },

    // 是否设置图表分割线
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: '语文',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],

      // 柱顶标签
      label: {
        show: true, // 是否显示
        rotate: 60, // 旋转角度
        position: 'top', // 显示位置
        color: 'white' // 文本颜色
      },

      // 柱背景
      showBackground: true,
      backgroundStyle: {
        color: 'red'
      },

      // 柱本身
      itemStyle: {
        color: 'green', // 背景（支持所有回调函数 --- 颜色渐变🤔应用）
        borderRadius: [0, 33, 33, 0] // 圆角
      }
      barWidth: '30%', // 宽度

      // 柱高亮
      emphasis: {
        focus: 'self'
      }
    }
  ]
}

拓展：颜色渐变

var option = {
  series: [
    {
      // 柱本身
      itemStyle: {
        // 方式一
        color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
          // 百分之0状态之下的颜色值
          {
            offset: 0,
            color: '#5052EE'
          },
          // 百分之100状态之下的颜色值
          {
            offset: 1,
            color: '#AB6EE5'
          }
        ]),

        // 方式二
        color: (arg) => {
          let selectColorArr = null
          if (arg.value > 300) {
            selectColorArr = colorArr[0]
          } else if (arg.value > 200) {
            selectColorArr = colorArr[1]
          } else {
            selectColorArr = colorArr[2]
          }
          return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 百分之0状态之下的颜色值
            {
              offset: 0,
              color: selectColorArr[0]
            },
            // 百分之100状态之下的颜色值
            {
              offset: 1,
              color: selectColorArr[1]
            }
          ])
        }
      }
    }
  ]
}

2、折线图 -- line ✨

• 普通折线图

var option = {
  xAxis: {
    type: 'category',
    data: [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009],

    // 去除轴内🎈间距（初始点紧挨y轴）
    boundaryGap: false,

    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,.6)', // 文本颜色
        fontSize: 12
      }
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255,.2)' // X 轴线颜色
      }
    }
  },

  yAxis: {
    type: 'value',

    // 支持缩放/脱离0值比例（防止y轴初始值过小，折线变为直线）
    scale: true,

    // 去除🎈刻度
    axisTick: { show: false },

    // 分割线
    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,.1)' // 颜色
      }
    }
  },

  series: [
    {
      name: '康师傅',
      type: 'line',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

      // 折线🎈线条
      smooth: true, // 是否为平滑线
      showSymbol: false, // 折角是否显示圆点
      lineStyle: {
        color: 'green', // 颜色
        type: 'solid' // 类型 dashed dotted solid
      },

      // 区域🎈填充（线和x轴形成的区域）
      areaStyle: {
        color: 'Skyblue' // 填充颜色
      }
    }
  ]
}

3、散点图 --- scatter

① 数据处理

  获取【二维数组】newArr

// 原始数据
var data = [
  { gender: 'female', height: 161.2, weight: 51.6 },
  { gender: 'female', height: 167.5, weight: 59 }
  // ……
]

// 生成目标二维数组（如：身高和体重的散点图）
var axisData = []
for (var i = 0; i < data.length; i++) {
  var height = data[i].height
  var weight = data[i].weight
  var newArr = [height, weight]
  axisData.push(newArr)
}

• 图表绘制

var option = {
  xAxis: {
    type: 'value',
    name: '身高',

    // 坐标名
    nameGap: 40 // 与坐标的距离
    nameLocation: 'end' // 显示位置：start、middle（center）、end
    nameTextStyle: {
      fontSize: 16
    }
  }
  series: [
    // 1、普通图效果
    {
      type: 'scatter',
      data: axisData,

      // 2、附加气泡🍗效果
      // symbolSize: 30
      symbolSize: function (arg) {
        // 控制散点的大小
        // console.log(arg)
        var height = arg[0] / 100
        var weight = arg[1]
        // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
        var bmi = weight / (height * height)
        if (bmi > 28) {
          return 20
        }
        return 5
      },

      itemStyle: {
        // 控制散点的样式
        color: function (arg) {
          // console.log(arg)
          var height = arg.data[0] / 100
          var weight = arg.data[1]
          // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
          var bmi = weight / (height * height)
          if (bmi > 28) {
            return 'red'
          }
          return 'green'
        }
      }
    }
  ]
}

② 图表生成

• 涟漪图

<script>
  var option = {
    series: [
      // 3、涟漪图效果
      {
        type: 'effectScatter', // 指明图表为带涟漪动画的散点图
        showEffectOn: 'emphasis', // 出现涟漪动画的时机 render、emphasis
        rippleEffect: {
          scale: 10, // 涟漪动画时, 散点的缩放比例
          brushType: 'stroke' // 空心涟漪效果
        }
      }
    ]
  }
</script>

二、非直角坐标系图表

  通过 ECharts 官方文档的示例部分，我们可以发现 ECharts 支持了绝大部分的图表类型。

图表	应用场景
饼图（pie）	描述数据占比情况
地图（map）	描述地理差异
雷达图（radar）	描述多维度对比
仪表盘图（gauge）	描述指标进度

1、饼图 -- pie ✨

• 数据准备

var pieData = [
  {
    name: '淘宝',
    value: 11231,
    itemStyle: {
      color: 'red' // 设置该扇形区域的颜色
    }
  },
  { name: '京东', value: 22673 },
  { name: '唯品会', value: 6123 },
  { name: '1号店', value: 8989 },
  { name: '聚美优品', value: 6700 }
]

• 图表绘制

var option = {
  series: [
    {
      type: 'pie',
      data: pieData,

      // 填充颜色
      color: [
        '#7DCEA0',
        '#A9DFBF',
        '#F9E79F',
        '#F4D03F',
        '#B7950B',
        '#F8C471',
        '#E59866',
        '#E67E22',
        '#D68910',
        '#F1948A',
        '#E74C3C'
      ],

      // 位置
      center: ['50%', '60%'], // [400, 500]

      // 饼图🎈设计
      radius: '20%', // 扇形：20、'20%'  ---  圆环：['50%', '75%']
      itemStyle: {
        borderRadius: 10 // 圆角
      },

      // 南丁格尔图（开启）
      roseType: 'radius', // 'radius'、'area'

      // label文本引导线
      labelLine: {
        length: 20, // 连接到图表的线长度
        length2: 40 // 连接到文字的线长度
      },

      // 选中效果
      selectedMode: 'single', // 'multiple'、'single'
      selectedOffset: 30
    }
  ]
}

  对饼图的设计，通常会对 label 的显示位置和显示时机做一些修改：

var option = {
  series: [
    {
      // 方式1
      label: {
        show: true, // 显示文字
        formatter: function (arg) {
          return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
        }
      }

      // 方式2 🎈
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
        labelLine: {
          show: false
        }
      }

      // 方式3
      hoverAnimation: false, // 关闭鼠标移动到饼图时的动画效果
      labelLine: {
        show: false // 隐藏指示线
      },
      label: {
        position: 'center' // 对应series内的data配置中的name属性值的位置
      }
    }
  ]
}

2、地图 -- map

地图资源

• 百度地图 API (opens new window)（需要申请百度地图 AK）
• 矢量地图 (opens new window)（需要准备矢量地图数据）

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

$.get('china.json', function (res) {
  // 注册地图🚩
  echarts.registerMap('chinaMap', res)

  mCharts.setOption({
    geo: {
      type: 'map',
      map: 'chinaMap', // 【chinaMap需要和registerMap中的第一个✨参数保持一致】

      // 缩放
      roam: true, // 设置允许缩放以及拖动的效果
      zoom: 1, // 设置初始化的缩放比例

      // 位置
      center: [87.617733, 43.792818], // 设置地图中心点的坐标

      // 样式
      itemStyle: {
        areaColor: '#2E72BF', // 地图背景色
        borderColor: '#333' // 边界线条色
      }
    }
  })
})

3、雷达图 -- radar

  用于对某种东西性能的观察、比较。

var option = {
  radar: {
    indicator: [
      {
        name: '易用性',
        // 配置各个维度的最大值
        max: 100
      },
      {
        name: '功能',
        max: 100
      },
      {
        name: '拍照',
        max: 100
      },
      {
        name: '跑分',
        max: 100
      },
      {
        name: '续航',
        max: 100
      }
    ],

    // 雷达图🎈设计
    shape: 'polygon' // 外层：circle、polygon
  },

  series: [
    {
      type: 'radar',
      data: [
        {
          name: '华为手机1',
          value: [80, 90, 80, 82, 90]
        },
        {
          name: '中兴手机1',
          value: [70, 82, 75, 70, 78]
        }
      ]
    }
  ]
}

4、仪表盘图 -- gauge

var option = {
  series: [
    {
      type: 'gauge',
      data: [
        // 每一个对象就代表一个指针
        {
          value: 97,
          itemStyle: {
            color: 'pink' // 指针的颜色
          }
        },
        {
          value: 85,
          itemStyle: {
            color: 'green'
          }
        }
      ],

      // 表盘数值范围
      min: 50 // min max （默认 0 - 100）
    }
  ]
}