eharts

第一章使用、echarts

<template>
  <button @click="updateDate">更换数据</button>
  <div class='home' ref="home">
    home
  </div>
</template>
name:'home'

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, reactive } from 'vue'
let mycart = null
let home = ref(null)
let myDate = reactive([
  { id: '1', name: '鞋子', xl: 22, kc: 77 },
  { id: '2', name: '绵衣', xl: 33, kc: 33 },
  { id: '3', name: '高跟鞋', xl: 44, kc: 44 },
  { id: '4', name: '袜子', xl: 66, kc: 56 },
  { id: '5', name: '牛仔裤', xl: 99, kc: 89 }
])
let updateDate = () => {
  // 注意:setOptions 可以重复调用，前面数据可以覆盖后面的数据
  mycart.setOption({
    xAxis: {
      data: myDate.map(r => r.name)
    },
    // 系列分类
    series: [
      {
        // 系类名称
        name: '销量',
        // 类型
        type: 'bar',
        // 系列数据
        data: myDate.map(r => r.xl)
      },
      {
        name: '库存',
        type: 'bar',
        data: myDate.map(r => r.kc)
      }
    ]
  })
}

// 绘制图表方法
const initEcharts = () => {
  mycart = echarts.init(home.value)
  mycart.setOption({
    // 标题配置
    title: {
      // 主标题文本
      text: '商品销量排名',
      // 主标题的超链接
      link: 'https://baidu.com',
      // 指定主标题的打开窗口方式
      target: 'blank',
      // 主标题文本样式
      textStyle: {
        color: 'red'
      },
      // 副标题文本
      subtext: '2022年最新数据',
      // 副标题文本样式
      subtextStyle: {
        color: 'green'
      },
      // 边框样式
      borderWidth: 1,
      borderColor: '#369',
      padding: [5, 10],
      borderRadius: 5,
      // 指控标题的位置
      right: '40%',
      top: '5%'
    },
    // 鼠标放到图标上显示数据的提示框
    tooltip: {
      show: true,
      // 触发类型 item 表示在指定的项中触发
      trigger: 'axis',
      // 触发事件的方式
      triggerOn: 'click',
      // 自定义提示框
      formatter: (r) => {
        const total = r.map(r => r.value).reduce((r, s) => r + s, 0)
        return `
          <div>
            <h4>${r[0].axisValue}</h4>
              <div>${r[0].marker} 
              <span>${r[0].seriesName}:${r[0].value}</span>
              </div>
              <div>${r[1].marker} 
              <span>${r[1].seriesName}:${r[1].value}</span>
              </div>
              <div>
                ${r[0].marker}
                <span>总计：${total}</span>
              </div>
          </div>
         `
      }
    },
    // x坐标系
    xAxis: {
      // 坐标轴类型 默认是 category
      type: 'category',
      // 坐标轴数据
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    // y轴坐标系
    yAxis: {
      // 数值轴
      type: 'value'
      // 数值轴的数据来源于系列的数据
    },
    // 系列分类
    series: [
      {
        // 系类名称
        name: '销量',
        // 类型
        type: 'bar',
        // 系列数据
        data: [5, 20, 36, 40, 10, 20]
      },
      {
        name: '库存',
        type: 'bar',
        data: [4, 22, 40, 18, 23, 30]
      }
    ],
    // 图标绘制区域
    grid: {
      show: true,
      borderWidth: 1,
      borderColor: 'red',
      // 控制图标在容器中的位置
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '5%',
      // 计算方位是否包含lable 默认是false
      containLabel: true,
      // 设置阴影
      showCursor: 'red',
      shadowBlur: 10
    },
    // 图例组件
    legend: {
      borderWidth: 1,
      borderColor: '#ccc',
      padding: 10,
      // 图列的布局
      left: '1%',
      top: '50%',
      // 图列的布局方向
      orient: 'vertical',
      icon: 'triangle'
    },
    // 工具栏
    toolbox: {
      // 各个工具配置项
      feature: {
        // 保存为图片
        saveAsImage: {},
        // 动态切换类型
        magicType: {
          // 这里设置的是折线图，柱状图，堆叠图
          type: ['line', 'bar', 'stack']
        },
        // 数据区域缩放
        dataZoom: {},
        // 数据视图工具
        dataView: {}
      }
    }
  })
}

onMounted(() => {
  initEcharts()
  // 注册窗口大小改变事件
  window.addEventListener('resize', () => {
    // 监听到窗口大小在发生改变时echarts也跟着发生改变自适应
    mycart.resize()
  })
})
</script>
<style scoped lang='scss'>
.home {
  width: 95%;
  height: 600px;
  border: 1px solid #ccc;
}
</style>