vue-echarts配置项详解

起因

最近接手了一个vue3项目，echarts用的是"vue-echarts": “^6.0.0”，每次查看文档的时候痛苦不已，找一个配置要花费大量时间，所以这篇文章，主要就是为了记录比较常见的一些配置。

主要会写三种图的配置项：圆环图、直线图、柱状图

效果图：

使用vue-echarts

在package.json中的dependencies里面加一行"vue-echarts": “^6.0.0”，然后npm install，进行安装，这是最简单的。

npm（推荐方式）

npm install echarts vue-echarts

CDN

在 HTML 文件按如下方式依次引入 echarts 和 vue-echarts：

<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

在main.js中引入

import VueCharts from 'vue-echarts'
app.component('app-chart', VueCharts) //使用的时候用<app-chart></app-chart>

官方文档（写的不详细，很多都是让跳转到echarts官网，再去查找）vue-echarts官网地址点这里

圆环图

<template>
  <div>
    <app-chart :option="state.pieOption" style="height: 300px;" :autoresize="true"></app-chart>
  </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue'
const state = reactive({
  pieOption: {},
})
onMounted(() => {
  getCostSubItemAnalysis()
})
const getCostSubItemAnalysis= () => {
  state.loading = true
  proxy.$apollo.query().then(res => {
    if (!res.loading && res.data) {
      state.costSubItemData = res.data.getCostSubItemAnalysis
      getPieChart(state.costSubItemData.subItems) //从接口中请求到数据
    }
  }).finally(() => {
    state.loading = false
  })
}
const getPieChart = (chartData) => {
  let newArr = []
  let legendWidth = 46 //该参数是为了让左侧图例文字对齐，给了文字宽度
  let totalLeft = '67%' //圆环中间总额距离左边的距离
  chartData?.forEach((item, index) => { //传过来的数据剔除为0的数据
    if (item.cost !== 0) newArr.push(item)
  })
  let total = 0  //计算总额
  newArr = newArr?.map(item => {
    total += Number(item.cost.toFixed(2)) //总额相加保留两位小数
    if (item.name.length > 6) legendWidth = 86 //如果图例名称大于六个文字，宽度给86，否则给46
    if (total >= 10000) totalLeft = '66%' //如果总额大于10000，圆环中间总额距离左边的距离为66%，否则为67%
    return { value: item.cost.toFixed(2), name: resource[item.name] ? resource[item.name] : item.name }
  })
  state.pieOption = {
    color: ['#4C66CE', '#F8D849', '#40CBCA', '#42AB7F', '#386F95', '#E2646C'], // 圆环图图例、每区域颜色
    legend: { // 图例
      orient: 'vertical',// 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
      x: 'left',// 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right'¦ {number}（x坐标，单位px）
      y: 'center',// 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）
      itemWidth: 6,// 图例图形宽度
      itemHeight: 6,// 图例图形高度
      itemGap: 8,// 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
      icon: 'circle', // 图例项的icon，ECharts 提供的标记类型包括'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none',可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
      textStyle: {// 图例的公用文本样式
        color: '#999999', //文字的颜色
        fontSize: 14, //文字的大小
        fontWeight: 400, //文字的字重
        rich: { // 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果，在文本中，可以对部分文本采用 rich 中定义样式，这里需要在文本中使用标记符号：`{styleName|text content text content}` 标记样式名。注意，换行仍是使用 '\n'。
          a: {//styleName
            width: legendWidth,
            color: '#666666'
          },
          b: {
            color: '#999999'
          },
          c: {
            color: '#999999'
          }
        }
      },
      formatter: function (name) {
        let total = 0
        let tarValue = null
        for (let i = 0; i < newArr.length; i++) {
          total += Number(newArr[i].value || 0)
          if (name === newArr[i].name) {
            tarValue = Number(newArr[i].value || 0)
          }
        }
        const p = (Number(tarValue / total) * 100).toFixed(2)
        var arr = [
          '{a|' + name + '}',
          '{b|' + tarValue + '}',
          '{c|' + p + '%}'
        ]
        return arr.join('  ')
      }
    },
    graphic: { // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
      type: 'text',// 用这个在圆环中间显示总金额
      left: totalLeft, //距离容器左边的距离
      top: '48%',
      style: {
        text: total.toFixed(2) + '元', // 总金额保留两位小数
        fontSize: 16, // 总金额字体大小
        color: '#333',
        fontWeight: 400
      }
    },
    series: [
      {
        type: 'pie', // 图表类型  bar:柱状图   line:折线图   pie:饼图
        radius: ['50%', '56%'], // 饼图的半径。可以为如下类型：number：直接指定外半径值。string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
        center: ['74%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
        avoidLabelOverlap: false, // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
        minAngle: 1,//最小的角度，防止出现为0时，样式出错的情况
        itemStyle: { // 图形样式
          borderColor: '#fff', // 图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
          borderWidth: 0, // 描边线宽。为 0 时无描边。
          borderRadius: 10 // 用于指定饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径的百分比值
        },
        label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
          normal: {
            show: false,
            formatter: '{name|{b}}\n\n{value|{c}} {money|元}', // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
            position: 'center',
            width: 130,
            lineHight: 30,
            backgroundColor: '#ffffff',
            rich: {
              name: {
                fontSize: 16,
                color: '#333',
                fontWeight: 400
              },
              value: {
                fontSize: 20,
                color: 'inherit',
                fontWeight: 600
              },
              money: {
                fontSize: 12,
                color: 'inherit',
                fontWeight: 600
              }
            }
          },
          show: false,
          position: 'center' // 标签的位置,可选：'outside',饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside'饼图扇区内部。'inner' 同 'inside'。'center'在饼图中心位置。
        },
        emphasis: { // 高亮状态的扇区和标签样式
          label: {
            show: true,
            fontSize: 16,
            fontWeight: '400'
          }
        },
        labelLine: { // 标签的视觉引导线配置
          show: false
        },
        labelLayout: function (params) { // 标签的统一布局配置。该配置项是在每个系列默认的标签布局基础上，统一调整标签的(x, y)位置，标签对齐等属性以实现想要的标签布局效果。
          const isLeft = params.labelRect.x < 50
          const points = params.labelLinePoints
          if (!points) return
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width
          return {
            labelLinePoints: points // 默认引导线的位置，目前只有饼图(pie)和漏斗图(funnel)有默认标签位置，如果没有该值则为 null
          }
        },
        data: newArr?.map(item => { // 系列中的数据内容数组。数组项可以为单个数值
          return {
            name: item.name,
            value: item.value
          }
        })
      }
    ]
  }
}
</script>

折线图

<template>
  <div>
    <app-chart :option="state.option" style="height: 350px;" :autoresize="true"></app-chart>
  </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue'
const state = reactive({
  option: {},
})
onMounted(() => {
  getCostSubItemAnalysis()
})
const getCostSubItemAnalysis= () => {
  state.loading = true
  proxy.$apollo.query().then(res => {
    if (!res.loading && res.data) {
      state.costSubItemData = res.data.getCostSubItemAnalysis
      getLineChart(state.costSubItemData.trend) //从接口中请求到数据
    }
  }).finally(() => {
    state.loading = false
  })
}
const getLineChart= (chartData) => {
  if (!chartData.series) chartData.series = []
  const maxArr = []
  const legend = []
  const series = chartData.series?.map(item => {
    const lineData = []
    item.data.forEach(subitem => {
      lineData.push(Math.abs(subitem)) // Math.abs计算一个数的绝对值
    })
    maxArr.push(Math.max.apply(null, lineData))
    legend.push({
      name: resource[item.name] ? resource[item.name] : item.name
    })
    return {
      name: resource[item.name] ? resource[item.name] : item.name,
      type: 'line',
      smooth: true,
      symbol: item.data.length > 1 ? 'none' : 'circle',
      data: item.data.map(subitem => subitem.toFixed(2))
    }
  })
  let max = 0
  max = Math.ceil(Math.max.apply(null, maxArr) * 1.2) > 0 ? Math.ceil(Math.max.apply(null, maxArr) * 1.2) : 3
  state.option = {
    color: ['#4C66CE', '#F8D849', '#40CBCA', '#42AB7F', '#386F95', '#E2646C'],
    grid: { // 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴. 可以在网格上绘制折线图，柱状图，散点图（气泡图）。
      left: '36px', // grid 组件离容器左侧的距离。
      right: '36px',
      top: '24px',
      bottom: '48px',
      containLabel: true //grid 区域是否包含坐标轴的刻度标签
    },
    legend: {// 下方图例
      itemWidth: 8,
      itemHeight: 8,
      icon: 'circle',
      data: legend,
      left: 'center',
      bottom: '0',
      itemGap: 30,
      textStyle: {
        color: '#999999',
        fontSize: 12,
        fontWeight: 400
      }
    },
    tooltip: { // 提示框组件
      trigger: 'axis' // 触发类型。可选：'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none'什么都不触发。
    },
    xAxis: {
      axisLine: { // x轴线设置
        lineStyle: {
          type: 'solid',
          color: '#E9E9EB', // x线的颜色
          width: '1' // 坐标线的宽度
        }
      },
      axisLabel: { // x轴字体颜色
        textStyle: {
          color: '#999999'
        }
      },
      axisTick: { // 去掉x轴刻度
        show: false
      },
      type: 'category', // 坐标轴类型。可选：'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
      data: chartData.xAxis?.map(item => {
        return props.periodType === 'day'
        ? moment(item * 1000).format('yyyy-MM-DD') : props.periodType === 'quarter'
        ? moment(item * 1000).format('yyyy') + '-' + transferDate[moment(item * 1000).format('MM')] : props.periodType === 'month'
        ? moment(item * 1000).format('yyyy-MM') : moment(item * 1000).format('yyyy')
      })
    },
    yAxis: {
      type: 'value',
      max: formatIntervalandMax(max, 3).max, // 坐标轴刻度最大值
      interval: formatIntervalandMax(max, 3).interval, // 强制设置坐标轴分割间隔
      axisLabel: {// 坐标轴刻度标签的相关设置
        formatter: (value) => {
          return value >= 1000 ? `￥${value / 1000}k` : `￥${value}`
        },
        textStyle: { // y轴字体颜色
          color: '#999999'
        }
      },
      splitLine: { // 保留网格线
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#E5E6EB', // y线的颜色
          width: '1' // 坐标线的宽度
        }
      }
    },
    series: series
  }
}
</script>

重叠（堆叠）柱状图

<template>
  <div>
    <app-chart :option="state.barOption" style="height: 380px;" :autoresize="true"></app-chart>
  </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue'
const state = reactive({
  barOption: {}
})
onMounted(() => {
  getCostTrend()
})
const getCostTrend = () => {
  state.loading = true
  proxy.$apollo.query().then(res => {
    if (!res.loading && res.data) {
      state.loading = false
      state.resourceAnalysisData = res.data.getCostDynamicResourceAnalysis //从接口中请求到数据
     getBarChart(state.lineCost.trend)
    }
  }).finally(() => {
    state.loading = false
  })
}

const getBarChart = (chartData) => {
  const lineData = []
  const onDemand = [] // 后付费的数据
  const reserved = [] // 先付费的数据
  const total = [] // 总额的数据

  chartData.series[0]?.data.forEach(item => {
    lineData.push(Math.abs(item.total))
    onDemand.push(item.onDemand.toFixed(2))
    reserved.push(item.reserved.toFixed(2))
    total.push((item.onDemand + item.reserved).toFixed(2))
  })
  const series = [
    {
      barGap: '-100%', //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。
      name: '总数',
      stack: 'total', //数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。
      type: 'bar', 
      barWidth: '8px', //柱条的宽度，不设时自适应。
      itemStyle: {
        color: '#40CBCA',//柱条的颜色
        barBorderRadius: 5 //柱条的圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
      },
      data: total
    },
    {
      barGap: '-100%',
      name: '后付费',
      type: 'bar',
      barWidth: '8px',
      itemStyle: {
        color: '#40CBCA',
        barBorderRadius: 5
      },
      data: onDemand
    },
    {
      name: '预付费',
      type: 'bar',
      barWidth: '8px',
      showBackground: true, //是否显示柱条的背景色。
      backgroundStyle: { // 每一个柱条的背景样式。需要将 showBackground 设置为 true 时才有效。
        color: '#F2F3F7'
      },
      itemStyle: {
        color: '#4C66CE',
        barBorderRadius: 5
      },
      data: reserved
    }
  ]
  let max = 0
  max = Math.ceil(Math.max.apply(null, lineData) * 1.2) > 0 ? Math.ceil(Math.max.apply(null, lineData) * 1.2) : 3 // 计算y轴刻度最大值
  state.barOption = {
    legend: { //设置图例样式
      selectedMode: false, // 图例禁止点击
      itemWidth: 8,
      itemHeight: 8,
      icon: 'circle',
      data: ['预付费', '后付费'],
      left: 'center',
      bottom: '0',
      itemGap: 30,
      textStyle: {
        color: '#999999',
        fontSize: 12,
        fontWeight: 400
      }
    },
    grid: { // 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴. 可以在网格上绘制折线图，柱状图，散点图（气泡图）。
      left: '20px',
      right: '20px',
      top: '20px',
      bottom: '40px',
      containLabel: true,// grid 区域是否包含坐标轴的刻度标签
      show: true,
      borderWidth: '1', // 网格的边框线宽
      borderColor: '#E9E9EB' // 网格的边框颜色
    },
    tooltip: {// 提示框组件
      trigger: 'axis' // 触发类型。可选：'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none'什么都不触发。
      axisPointer: { // 坐标轴指示器配置项
        type: 'shadow' //指示器类型。可选'line' 直线指示器'shadow' 阴影指示器'none' 无指示器'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
      },
      formatter: function (params) {
        let total = 0
        let axisValue = ''
        params.splice(0, 1)
        params.forEach(item => {
          total += Number(item.value)
          axisValue = item.axisValue
        })
        let tooltipVal = `<div>${axisValue}</div><div>当前总金额 -- ￥${total.toFixed(2)}</div>`
        params.forEach(item => {
          tooltipVal += `<div>${item.marker}<span style="margin-left: 4px;">${item.seriesName}</span><span style="margin-left: 16px; display: inline-block; min-width: 100px;">￥${item.value}</span><span>${total ? (Number(item.value) / total * 100).toFixed(2) + '%' : '--'}</span></div>`
        })
        return tooltipVal
      }
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        textStyle: {
          color: '#999999'
        }
      },
      axisTick: { // 刻度
        show: false
      },
      axisLine: { // 轴线
        lineStyle: {
          color: '#E9E9EB',
          width: 1
        }
      },
      data: chartData.xAxis.map(item => {
        return props.periodType === 'day'
        ? moment(item * 1000).format('yyyy-MM-DD') : props.periodType === 'quarter'
        ? moment(item * 1000).format('yyyy') + '-' + transferDate[moment(item * 1000).format('MM')] : props.periodType === 'month'
        ? moment(item * 1000).format('yyyy-MM') : moment(item * 1000).format('yyyy')
      })
    },
    yAxis: {
      max: formatIntervalandMax(max, 3).max, //y轴刻度最大值
      interval: formatIntervalandMax(max, 3).interval, // 强制设置坐标轴分割间隔
      type: 'value', // 坐标轴类型。可选：'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
      axisLabel: {
        formatter: (value) => {
          return value >= 1000 ? `￥${value / 1000}k` : `￥${value}`
        },
        textStyle: { // y轴字体颜色
          color: '#999999'
        }
      }
    },
    series: series
  }
}
</script>

柱状图

<template>
  <div>
    <app-chart :option="state.option" style="height: 380px;" :autoresize="true"></app-chart>
  </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue'
const state = reactive({
  option: {}
})
onMounted(() => {
  getCostDynamicResourceAnalysis()
})
const getCostDynamicResourceAnalysis = () => {
  state.loading = true
  proxy.$apollo.query().then(res => {
    if (!res.loading && res.data) {
      state.loading = false
      state.resourceAnalysisData = res.data.getCostDynamicResourceAnalysis //从接口中请求到数据
      getLineChart(state.resourceAnalysisData.trend)
    }
  }).finally(() => {
    state.loading = false
  })
}

const getLineChart = (chartData) => {
  let max = 0
  const lineData = []
  chartData.series[0]?.data.forEach(item => {
    lineData.push(Math.abs(item))
  })
  max = Math.ceil(Math.max.apply(null, lineData) * 1.2) > 0 ? Math.ceil(Math.max.apply(null, lineData) * 1.2) : 3
  state.option = {
    grid: {
      left: '20px',
      right: '20px',
      top: '20px',
      bottom: '40px',
      containLabel: true,
      show: true,
      borderWidth: '1',
      borderColor: '#E9E9EB'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { //坐标轴指示器配置项
        type: 'shadow' //指示器类型。可选'line' 直线指示器'shadow' 阴影指示器'none' 无指示器'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
      }
    },
    xAxis: {
      type: 'category',
      axisLabel: {// x轴字体颜色
        textStyle: {
          color: '#999999'
        }
      },
      axisTick: { // 刻度
        show: false
      },
      axisLine: { // 轴线
        lineStyle: {
          color: '#E9E9EB',
          width: 1
        }
      },
      data: chartData.xAxis.map(item => {
        return props.periodType === 'day'
        ? moment(item * 1000).format('yyyy-MM-DD') : props.periodType === 'quarter'
        ? moment(item * 1000).format('yyyy') + '-' + transferDate[moment(item * 1000).format('MM')] : props.periodType === 'month'
        ? moment(item * 1000).format('yyyy-MM') : moment(item * 1000).format('yyyy')
      })
    },
    yAxis: {
      max: formatIntervalandMax(max, 3).max,//y轴刻度最大值
      interval: formatIntervalandMax(max, 3).interval,// 强制设置坐标轴分割间隔
      type: 'value', // 坐标轴类型。可选：'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
      axisLabel: {// y轴字体颜色
        textStyle: {
          color: '#999999'
        }
      }
    },
    series: [
      {
        data: chartData.series[0]?.data.map(item => item.toFixed(2)),
        type: 'bar',
        barWidth: '8px', 
        showBackground: true,
        backgroundStyle: {
          color: '#F2F3F7'
        },
        itemStyle: {
          color: '#4C66CE',
          barBorderRadius: 5
        }
      }
    ]
  }
}
</script>