页面结构

<template>
  <div ref="charts" class="charts"/>
</template>

柱状图

initEcharts() {
  // 初始化charts实例
  this.mycharts.setOption({
    // x轴
    xAxis: {
      show: false, // 隐藏x轴
      type: 'category',
      data: this.classNameList
    },
    // y轴
    yAxis: {
      show: false
    },
    // 系列
    series: [
      {
        type: 'bar', // 柱状图
        data: this.classCount,
        label: {
          show: true, // 显示柱状图的文字
          position: 'inside' // 文字显示在柱状图的里面
        },
        // 随机颜色
        itemStyle: {
          normal: {
            color: function(params) {
              return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6)
            }
          }
        }
      }
    ],
    // 布局调试
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    },
    // 鼠标悬浮提示
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    }
  })
}

折线图

renderCharts() {
  // 指定图表的配置项和数据
  const option = {
    xAxis: {
      show: false,
      // x轴数据为最近7天 格式为MM-DD
      data: this.xAxis
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        type: 'line',
        data: this.xAxisData,
        // 折线颜色每次都不一样
        itemStyle: {
          color: `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
            Math.random() * 255
          )},${Math.floor(Math.random() * 255)})`
        }
      }
    ],
    grid: {
      left: 0,
      right: 0,
      bottom: 3,
      top: 3
    },
    tooltip: {
      trigger: 'axis'
    }
  }
  // 使用刚指定的配置项和数据显示图表。
  this.myCharts.setOption(option)
}

饼图

在computed中添加计算属性：

randomColor() {
  const color1 = Math.floor(Math.random() * 123456789).toString(16).slice(0, 6)
  const color2 = Math.floor(Math.random() * 987654321).toString(16).slice(0, 6)
  return ['#' + color1, '#' + color2]
}

在methods中添加函数：

renderCharts() {
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['60%', '90%'],
        // 颜色随机
        color: this.randomColor,
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: this.genderRatio
      }
    ]
  }
  this.myEcharts.setOption(option)
}

散点图

initEcharts() {
  // 标线
  const markLineOpt = {
    tooltip: {
      formatter: '平均分：' + this.average
    },
    lineStyle: {
      type: 'solid'
    },
    data: [
      [
        // 通过coord指定标线起点的位置
        {
          coord: [0, this.average],
          symbol: 'none'
        },
        // 通过coord指定标线终点的位置
        {
          coord: [11, this.average],
          symbol: 'none'
        }
      ]
    ]
  }
  // 绘制图表
  this.mycharts.setOption({
    title: {
      show: true,
      text: '成绩散点图',
      textStyle: {
        color: 'gray',
        fontSize: 14
      },
      left: 'center'
    },
    tooltip: {
      // 这个{a}表示series中的name {b}表示series中的data中的name {c}表示series中的data中的value
      formatter: (params) => {
        return `${params.data.name}：${params.data.value[1]}`
      }
    },
    xAxis: [
      { gridIndex: 0, min: 0, max: 11 }
    ],
    yAxis: [
      { gridIndex: 0, min: 0, max: 100 }
    ],
    series: [
      {
        name: '成绩',
        type: 'scatter',
        symbolSize: 10,
        data: this.xAxisData,
        markLine: markLineOpt
      }
    ]
  })
}

中国地图

需要额外的文件,下载该json文件

页面结构

<template>
  <div ref="charts" class="charts"/>
</template>

使用

import chinaJson from '@/assets/china.json'

在mounted中添加：

// 初始化charts实例
this.myCharts = echarts.init(this.$refs.charts)
// 使用中国地图
echarts.registerMap('china', chinaJson)
// 加载动画
this.myCharts.showLoading()
// 渲染图表
this.renderCharts()
// 隐藏加载动画
this.myCharts.hideLoading()

其中,renderCharts函数为：

renderCharts() {
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '各省市学生人数分布'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} {c}人'
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        saveAsImage: {}
      }
    },
    visualMap: {
      min: 0,
      max: this.maxProvince, // 最大值
      text: ['多', '少'],
      realtime: true,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
    series: [
      {
        name: '各省市学生人数分布',
        type: 'map',
        map: 'china',
        // 地图放大
        zoom: 1.1,
        label: {
          show: true
        },
        data: this.provinceData // 数据
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  this.myCharts.setOption(option)
}

其中，provinceData的数据结构为：

provinceData: [
  { name: '北京', value: 0 },
  { name: '天津', value: 0 },
  { name: '上海', value: 0 },
  { name: '重庆', value: 0 },
  { name: '河北', value: 0 },
  { name: '河南', value: 0 },
  { name: '云南', value: 0 },
  { name: '辽宁', value: 0 },
  { name: '黑龙江', value: 0 },
  { name: '湖南', value: 0 },
  { name: '安徽', value: 0 },
  { name: '山东', value: 0 },
  { name: '新疆', value: 0 },
  { name: '江苏', value: 0 },
  { name: '浙江', value: 0 },
  { name: '江西', value: 0 },
  { name: '湖北', value: 0 },
  { name: '广西', value: 0 },
  { name: '甘肃', value: 0 },
  { name: '山西', value: 0 },
  { name: '内蒙古', value: 0 },
  { name: '陕西', value: 0 },
  { name: '吉林', value: 0 },
  { name: '福建', value: 0 },
  { name: '贵州', value: 0 },
  { name: '广东', value: 0 },
  { name: '青海', value: 0 },
  { name: '西藏', value: 0 },
  { name: '四川', value: 0 },
  { name: '宁夏', value: 0 },
  { name: '海南', value: 0 },
  { name: '台湾', value: 0 },
  { name: '香港', value: 0 },
  { name: '澳门', value: 0 }
]