vue3 学习笔记17 -- echarts的使用

vue3 学习笔记17 – echarts的使用

• 安装 Echarts

npm i echarts --save

• 组件中使用

<template>
  <div class="line-box">
    <div id="chart" style="height: 100%; height: 100%"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { reactive, toRaw } from 'vue'

let chartOptions = reactive({})
const lineData = reactive({
  xData: [],
  seriesData: []
})
let chartInstance = null
const getOptions = () => {
  return {
    title: {
      show: false
    },
    tooltip: {
      trigger: 'axis',
      confine: true
    },
    legend: {
      show: true
    },
    grid: {
      left: '2%',
      right: '5%',
      bottom: '1%',
      top: '4%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        //	boundaryGap: true,//坐标轴两边留白
        data: lineData.xData,
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
          textStyle: {
            color: '#45494D',
            fontStyle: 'normal',
            fontSize: 14,
            padding: [6, 0, 0, 0],
            fontFamily: 'PingFangSC-Regular'
          }
        },
        axisTick: {
          //坐标轴刻度相关设置。
          show: false
        },
        axisLine: {
          show: true,
          //坐标轴轴线相关设置
          lineStyle: {
            color: '#45494D'
          }
        },
        splitLine: {
          //坐标轴在 grid 区域中的分隔线。
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        position: 'right',
        axisLabel: {
          textStyle: {
            color: '#a8aab0',
            fontSize: 14
          },
          formatter: function (val) {
              return `{a|- ${val}个}`
            
          },
          rich: {
            a: {
              color: '#45494D',
              fontSize: 14,
              padding: [0, 0, 2, 10],
              fontFamily: 'PingFangSC-Regular'
            },
            b: {
              color: '#A1A5AA',
              fontSize: 14,
              padding: [0, 0, 2, 10],
              fontFamily: 'PingFangSC-Regular'
            }
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
          length: 12,
          lineStyle: {
            color: '#A1A5AA' //刻度线的颜色
          }
        },

        splitLine: {
          show: false,
          lineStyle: {
            color: ['#fff'],
            opacity: 0.06
          }
        }
      }
    ],
    series: lineData.seriesData
  }
}

const initChart = () => {
  let chartDom = document.getElementById('chart')
  chartInstance = echarts.init(chartDom)
  chartInstance.setOption(getOptions())
}
const getData = async () => {
  // 请求接口
  lineData.xData = ['周一','周二','周三','周四','周五'](categoryList, 'day')
  lineData.seriesData = [{
    name:'衣服'，
    data:[10,20,15,30,45],
    type: 'line',
      smooth: true,
      symbolSize: 20,
      showSymbol: false,

      emphasis: {
        itemStyle: {
          borderWidth: 2,
          borderColor: '#676A6D'
        }
      }
  },{
    name:'鞋子'，
    data:[10,30,40,2,45],
    type: 'line',
      smooth: true,
      symbolSize: 20,
      showSymbol: false,

      emphasis: {
        itemStyle: {
          borderWidth: 2,
          borderColor: '#676A6D'
        }
      }
  }]
 
  initChart()
}
onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
/* 样式可以根据需要添加 */
.line-box {
  width: 600px;
  height: 350px;
}
</style>

封装echarts

• 创建文件src/components/chart/index.vue

<template>
  <div style="width: 100%; height: 100%" ref="chartRef"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { debounce } from '@/utils'
const props = defineProps({
  options: {
    type: Object,
    required: true
  }
})


let chartInstance = null
const chartRef = ref(null)

onMounted(() => {
  window.addEventListener('resize', $_resizeHandler)
})

onBeforeUnmount(() => {
  chartInstance && chartInstance.dispose()
  chartInstance = null
  window.removeEventListener('resize', $_resizeHandler)
})

function renderChart() {
  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption(props.options)
}
const $_resizeHandler = debounce(() => {
  if (chartInstance) {
    chartInstance.resize()
  }
}, 100)



watch(
  () => props.options,
  (newOptions) => {
    if (chartInstance) {
      chartInstance.setOption(newOptions)
    }
  },
  { deep: true }
)
</script>

<style scoped>
/* Optional: Add custom styles */
</style>

• 组件引入

<template>
  <div class="line-box">
    <chart :options="chartsOptions"></chart>
  </div>
</template>

<script lang="ts" setup>

import chart from '@/components/chart/index.vue'
import { reactive, toRaw } from 'vue'


const chartsOptions = reactive({
  title: {
    show: false
  },
  tooltip: {
    trigger: 'axis',
    confine: true
  },
  legend: {
    show: true
  },
  grid: {
    left: '2%',
    right: '5%',
    bottom: '1%',
    top: '4%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: []
      // other configurations...
    }
  ],
  yAxis: [
    {
      type: 'value',
      position: 'right',
      axisLabel: {
        // axis label configurations...
      }
      // other configurations...
    }
  ],
  series: []
})

const getElectricLineByType = async () => {
  // 接口请求
  chartsOptions.xAxis[0].data = lineData.xData
  chartsOptions.series = lineData.seriesData
}
onMounted(() => {
  getElectricLineByType()
})
</script>

<style scoped lang="scss">
/* 样式可以根据需要添加 */
.line-box {
  width: 600px;
  height: 350px;
}
</style>