Vue3用echarts实现一些特殊样式的折线图和柱状图

案例1：

（1）效果

（2）代码

 <div class="left-one-bottom">
    <div id="left-echarts-one-id" />
 </div>
<script lang="ts" setup>
import { defineComponent, ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import { get10YearTrend } from '@/script/api/core'
let yearData: any = [] // 年份
let areaData: any = [] // 地区生产总值
let perCapitaData: any = [] // 人均地区生产总值
const getData = () => {
  // 这个方法用于请求数据+渲染echarts
  get10YearTrend({}).then((res: any) => {
    if (res.code == 200) {
      res.data.forEach((element: any) => {
        yearData.push(element.year)
        areaData.push(element.gdp)
        perCapitaData.push(element.perCapitaRegionalGdp)
      })
      echartsRend()
    }
  })
}
// 获取当前组件实例
const { proxy }: any = getCurrentInstance()
const echartsRend = () => {
  // 获取echart挂载的DOM节点
  const container = ref(document.querySelector('#left-echarts-one-id'))
  // echarts初始化
  let myChart = proxy.$echarts.init(container.value)
  const option = {
    legend: {
      show: true,
      left: 'right',
      selectedMode: false,
      textStyle: {
        // 图例文字样式属性
        color: 'rgba(255, 255, 255, 0.9)', // 字体颜色
        fontSize: 14, // 字体大小
        align: 'left', // 水平对齐方式为左对齐
      },
      itemHeight: 2,
      itemWidth: 12,
      itemGap: 14,
      data: [
        {
          name: '地区生产总值',
          // 强制设置图形为圆。
          icon: 'rect',
          itemStyle: {
            color: 'rgba(51, 255, 221, 1)',
            borderColor: 'rgba(51, 255, 221, 1)',
            shadowColor: 'rgba(51, 255, 221, .8)',
            shadowBlur: 10,
          },
        },
        {
          name: '人均地区生产总值',
          // 强制设置图形为圆。
          icon: 'rect',
        },
      ],
    },
    // 直角坐标系内绘图网格
    grid: {
      show: false, // 是否显示直角坐标系网格,外边框
      top: '40', // 离容器左侧的距离
      right: '10', // 离容器上侧的距离
      left: '10', // 离容器左侧的距离
      bottom: '0', // 离容器底部的距离
      borderColor: '#ff0', // 外边框颜色
      containLabel: true, // 是否包含坐标轴的刻度标签,默认为false；true时防止标签溢出
    },
    // 提示框组件
    tooltip: {
      trigger: 'axis', // 触发类型,axis:坐标轴触发
      axisPointer: {
        // 坐标轴指示器配置项
        type: 'shadow', // 指示器类型:line、shadow、none、cross
        shadowStyle: {
          color: 'rgba(216, 216, 216, 0.1)',
        },
      },
      backgroundColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮层的背景颜色
      borderColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮层的边框颜色
      textStyle: {
        color: '#B1DEFF',
        fontSize: '24',
        fontFamily: 'PangMenZhengDao',
      },
      formatter: function (params: any) {
        // 2.回调函数,可return dom 自定义样式
        // console.log('params', params)
        return (
          params[0].name +
          '年<br>' +
          '<div style="display:flex;align-items: center;"><span style="background-color:rgba(51, 255, 221, 1);display: inline-block;width: 8px;height: 2px;margin-right: 4px;"></span>' +
          params[0].seriesName +
          '：<span style="color: #fff;margin-right:6px;">' +
          params[0].value +
          '</span>' +
          '<span style="font-size:14px;color: #B1DEFF;">亿元</span></div>' +
          '<div style="display:flex;align-items: center;"><span style="background-color:rgba(255, 204, 0, 1);display: inline-block;width: 8px;height: 2px;margin-right: 4px;"></span>' +
          params[1].seriesName +
          '：<span style="color: #fff;margin-right:6px;">' +
          params[1].value +
          '</span>' +
          '<span style="font-size:14px;color: #B1DEFF;">元/人</span></div>'
        )
      },
    },
    // 图表背景色
    backgroundColor: 'transparent',
    // x 轴设置
    xAxis: [
      {
        type: 'category',
        nameLocation: 'end', // X轴名称位置
        nameTextStyle: {
          // X轴名称样式
          color: '#fff',
          fontWeight: 'bold',
        },
        nameGap: 10, // X轴名称与轴线之间的距离
        nameRotate: 0, // 坐标轴名称旋转
        axisLabel: {
          // X轴类目名称样式
          // interval: 'auto',
          verticalAlign: 'middle',
          lineHeight: 16,
          margin: 20,
          color: '#fff',
          fontSize: 12,
          fontFamily: 'PangMenZhengDao',
          rotate: 0,
        },
        axisLine: {
          // X轴轴线设置
          show: true,
          lineStyle: {
            color: 'rgba(216, 216, 216, 0.5)',
            width: 1,
          },
        },
        axisTick: {
          // X轴刻度相关设置
          show: false,
        },
        splitLine: {
          // 横向分隔线
          show: false,
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: 'rgba(216, 216, 216, 0.1)',
            type: 'solid',
            width: 37,
          },
        },
        // 类目数据
        data: yearData,
      },
    ],
    // y轴设置
    yAxis: [
      {
        min: 0, // 坐标轴刻度最小值
        axisLine: {
          // y轴轴线设置
          show: true,
          lineStyle: {
            color: 'rgba(216, 216, 216, 0.5)',
            width: 1,
          },
        },
        axisLabel: {
          // y轴刻度标签
          formatter: '{value}',
          inside: false, // 刻度标签是否朝内，默认朝外
          textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 12,
            fontFamily: 'PangMenZhengDao',
          },
        },
        axisTick: {
          // 刻度设置
          show: false,
        },
        splitLine: {
          // 纵向分隔线
          show: true,
          lineStyle: {
            color: 'rgba(216, 216, 216, 0.2)',
            type: 'dashed',
          },
        },
      },
      {
        type: 'value',
        // min: 0,
        // max: 100,
        // splitNumber: 5,
        // interval: 20,
        splitLine: {
          show: false,
          lineStyle: {
            type: 'solid',
            color: 'rgba(216, 216, 216, .2)',
          },
        },
        axisLine: {
          // y轴轴线设置
          show: true,
          lineStyle: {
            color: 'rgba(216, 216, 216, 0.5)',
            width: 1,
          },
        },
        axisLabel: {
          show: true,
          formatter: '{value}',
          textStyle: {
            color: 'rgba(255,255,255, 1)',
            fontSize: 12,
            fontFamily: 'PangMenZhengDao',
          },
        },
      },
    ],
    series: [
      {
        name: '地区生产总值',
        type: 'line',
        markPoint: 'arrow',
        lineStyle: {
          shadowColor: 'rgba(51, 255, 221, 1)', // 设置阴影颜色
          shadowBlur: 10, // 设置阴影的模糊大小
        },
        itemStyle: {
          normal: {
            color: 'rgba(51, 255, 221, 1)',
          },
        },
        symbolSize: 8,
        data: areaData,
      },
      {
        type: 'line',
        yAxisIndex: 1,
        name: '人均地区生产总值',
        lineStyle: {
          shadowColor: 'rgba(255, 204, 0, 1)', // 设置阴影颜色
          shadowBlur: 10, // 设置阴影的模糊大小
          // shadowOffsetX: 0, // 设置阴影沿X轴的偏移量
          // shadowOffsetY: 3 // 设置阴影沿y轴的偏移量
        },
        itemStyle: {
          normal: {
            color: 'rgba(255, 204, 0, 1)',
          },
        },
        symbolSize: 8,
        data: perCapitaData,
      },
    ],
  }
  myChart.setOption(option)
  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
onMounted(() => {
  getData() // 使用方法放在onMounted中
})
</script>
<style lang="scss" scoped>
.left-one-bottom {
  width: 1005px;
  height: 282px;
  margin: 0 auto;
  #left-echarts-one-id {
    width: 100%;
    height: 100%;
  }
}
</style>

案例2：

（1）效果

（2）代码

<div class="left-two-bottom">
    <div id="left-echarts-two-id" />
</div>
 <script lang="ts" setup>
  import { defineComponent, ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue'
  import { getZjCityTrend } from '@/script/api/core'
  let cityName:any = [] // 城市
  let areaData:any = [] // 地区生产总值
  let perCapitaData:any = [] // 人均地区生产总值
  const getData = () => { // 这个方法用于请求数据+渲染echarts
    getZjCityTrend({}).then((res:any) =>{
        if(res.code == 200){
            // console.log(res)
            res.data.forEach((element:any) => {
                cityName.push(element.city)
                areaData.push(element.gdp)
                perCapitaData.push(element.perCapitaRegionalGdp)
            })
            echartsRend()
        }
    })
  }
  // 获取当前组件实例
  const { proxy }: any = getCurrentInstance();
  const echartsRend = () => {
      // 获取echart挂载的DOM节点
      const container = ref(document.querySelector('#left-echarts-two-id'));
    // echarts初始化
	let myChart = proxy.$echarts.init(container.value);
    const option = {
        legend: [{
            show: true,
            right: '15%',
            selectedMode: false,
            textStyle: { // 图例文字样式属性  
                color: 'rgba(255, 255, 255, 0.9)', // 字体颜色
                fontSize: 14, // 字体大小  
                align: 'left' // 水平对齐方式为左对齐  
            },
            itemHeight: 12,
            itemWidth: 12,
            itemGap: 14,
            data: [{
                name: '地区生产总值',
                // 强制设置图形为圆。
                icon: 'circle',
                itemStyle: {
                    color: 'rgba(51, 255, 221, 1)',
                    borderColor: 'rgba(51, 255, 221, 1)',
                    shadowColor: 'rgba(51, 255, 221, .6)',
                    shadowBlur: 10
                }
            }] 
        },{
            show: true,
            right: '0%',
            selectedMode: false,
            textStyle: { // 图例文字样式属性  
                color: 'rgba(255, 255, 255, 0.9)', // 字体颜色
                fontSize: 14, // 字体大小  
                align: 'left' // 水平对齐方式为左对齐  
            },
            itemHeight: 2,
            itemWidth: 12,
            itemGap: 14,
            data: [{
                name: '人均地区生产总值',
                // 强制设置图形为圆。
                icon: 'rect'
            }] 
        },],
        // 直角坐标系内绘图网格
        grid: {
            show: false, // 是否显示直角坐标系网格,外边框
            top: '40', // 离容器左侧的距离
            right: '10', // 离容器上侧的距离
            left: '10', // 离容器左侧的距离
            bottom: '0', // 离容器底部的距离
            borderColor: '#ff0', // 外边框颜色
            containLabel: true // 是否包含坐标轴的刻度标签,默认为false；true时防止标签溢出
        },
        // 提示框组件
        tooltip: {
            trigger: 'axis', // 触发类型,axis:坐标轴触发
            axisPointer: {
                // 坐标轴指示器配置项
                type: 'shadow', // 指示器类型:line、shadow、none、cross
                shadowStyle: {
                    color: 'rgba(216, 216, 216, 0.1)'
                } // 指示器类型:line、shadow、none、cross
            },
            backgroundColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮层的背景颜色
            borderColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮层的边框颜色
            textStyle: {
                color: '#B1DEFF',
                fontSize: '24',
                fontFamily:'PangMenZhengDao',
            },
            formatter: function (params:any) {
                // 2.回调函数,可return dom 自定义样式
                // console.log('params', params)
                return (
                   '<div style="font-family:Alibaba2;font-weight: 800; ">'+params[0].name + '</div>' + 
                  '<div style="display:flex;align-items: center;"><span style="background-color:rgba(51, 255, 221, 1);display: inline-block;width: 8px;height: 8px;border-radius: 50%;margin-right: 4px;"></span>' + params[0].seriesName +'：<span style="color: #fff;margin-right:6px;">'+ params[0].value + '</span>' + '<span style="font-size:14px;color: #B1DEFF;">亿元</span></div>'+ 
                  '<div style="display:flex;align-items: center;"><span style="background-color:rgba(255, 204, 0, 1);display: inline-block;width: 8px;height: 2px;margin-right: 4px;"></span>' + params[1].seriesName +'：<span style="color: #fff;margin-right:6px;">'+ params[1].value + '</span>' + '<span style="font-size:14px;color: #B1DEFF;">元/人</span></div>'
                )
            }
        },
        // 图表背景色
        backgroundColor: 'transparent',
        // x 轴设置
        xAxis: [
            {
                type: 'category',
                nameLocation: 'end', // X轴名称位置
                nameTextStyle: {
                // X轴名称样式
                color: '#fff',
                fontWeight: 'bold'
                },
                nameGap: 10, // X轴名称与轴线之间的距离
                nameRotate: 0, // 坐标轴名称旋转
                axisLabel: {
                    // X轴类目名称样式
                    // interval: 'auto',
                    verticalAlign: 'middle',
                    lineHeight: 16,
                    margin: 20,
                    color: '#fff',
                    fontSize: 12,
                    fontFamily:'Alibaba2',
                    fontWeight: '800',
                    rotate: 0,
                },
                axisLine: {
                    // X轴轴线设置
                    show: true,
                    lineStyle: {
                        color: 'rgba(216, 216, 216, 0.5)',
                        width: 1
                    }
                },
                axisTick: {
                    // X轴刻度相关设置
                    show: false
                },
                splitLine: {
                    // 横向分隔线
                    show: false
                },
                axisPointer: {
                    type: "line",
                    lineStyle: {
                        color: "rgba(216, 216, 216, 0.1)",
                        type: "solid",
                        width: 37,
                    },
                },
                // 类目数据
                data: cityName
            }
        ],
        // y轴设置
        yAxis: [
        {
            // type: 'value',
            // position: 'left',
            // name:'单位：亿元',
            // nameTextStyle: {
            //     color: 'rgba(255, 255, 255, 0.8)',
            //     fontSize: 14,
            //     fontWeight: 'bold'
            // },
            min: 0, // 坐标轴刻度最小值
            axisLine: {
                // y轴轴线设置
                show: true,
                lineStyle: {
                    color: 'rgba(216, 216, 216, 0.5)',
                    width: 1
                }
            },
            axisLabel: {
                // y轴刻度标签
                formatter: '{value}',
                inside: false, // 刻度标签是否朝内，默认朝外
                textStyle: {
                    color: 'rgba(255, 255, 255, 1)',
                    fontSize: 12,
                    fontFamily:'PangMenZhengDao'
                }
            },
            axisTick: {
                // 刻度设置
                show: false
            },
            splitLine: {
                // 纵向分隔线
                show: true,
                lineStyle: {
                    color: 'rgba(216, 216, 216, 0.2)',
                    type: 'dashed'
                }
            }
        },
          {
            type: 'value',
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid",
                color: "rgba(216, 216, 216, .2)"
              }
            },
            axisLine: {
                // y轴轴线设置
                show: true,
                lineStyle: {
                    color: 'rgba(216, 216, 216, 0.5)',
                    width: 1
                }
            },
            axisLabel: {
              show: true,
              formatter: '{value}',
              textStyle: {
                color: "rgba(255,255,255, 1)",
                fontSize: 12,
                fontFamily:'PangMenZhengDao'
              }
            }
          }
        ],
        series: [
            {
                name: '地区生产总值',
                type: 'bar',
                barWidth: 10,
                markPoint: 'arrow',
                itemStyle: {
                color: new proxy.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                    {
                        offset: 0,
                        color: 'rgba(110, 230, 240, 1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(0, 131, 210, 1)'
                    }
                    ],
                    false
                )
                },
                data: areaData
            },
            {
              type: 'line',
              yAxisIndex: 1,
              name: '人均地区生产总值',
              lineStyle: {
                    shadowColor: 'rgba(255, 204, 0, 1)', // 设置阴影颜色  
                    shadowBlur: 10 // 设置阴影的模糊大小 
                },
              itemStyle: {
                normal: {
                  color: 'rgba(255, 204, 0, 1)' 
                }
              },
              symbolSize: 8,
              data: perCapitaData
            }
        ]
    }
    myChart.setOption(option);
    // 根据页面大小自动响应图表大小
	window.addEventListener("resize", function () {
	    myChart.resize();
	});
  }
  onMounted(() => {
    getData()
  });
</script>
<style lang="scss" scoped>
.left-two-bottom {
    width: 1005px;
    height: 296px;
    margin: 0 auto;
    #left-echarts-two-id {
        width: 100%;
        height: 100%;
    }
}
</style>

案例3：

（1）效果

（2）代码

<div class="right-two-box">
    <div id="right-echarts-two-id" />
</div>
 <script lang="ts" setup>
  import { defineComponent, ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue'
  import { getPredictiveAnalysis } from '@/script/api/core'
  let yearData: any = [] // 年份
  let areaData: any = [] // 地区生产总值
  let timeType:String = '' // 用于判断是年还是季度
  const getData = () => {
    // 这个方法用于请求数据+渲染echarts
  getPredictiveAnalysis({}).then((res: any) => {
    if (res.code == 200) {
        // console.log(res)
        res.data.forEach((element: any) => {
            yearData.push(element.time)
            areaData.push(element.value)
            timeType = element.unit
        })
        echartsRend()
    }
  })
    }
    // 获取当前组件实例
    const { proxy }: any = getCurrentInstance();
    const echartsRend = () => {
    // 获取echart挂载的DOM节点
    const container = ref(document.querySelector('#right-echarts-two-id'));
    // echarts初始化
    let myChart = proxy.$echarts.init(container.value);
    const option = {
        legend: {
            show: true,
            left: 'right',
            selectedMode: false,
            textStyle: { // 图例文字样式属性  
                color: 'rgba(255, 255, 255, 0.9)', // 字体颜色
                fontSize: 14, // 字体大小  
                align: 'left' // 水平对齐方式为左对齐  
            },
            itemHeight: 1,
            itemWidth: 12,
            itemGap: 14,
            data: [{
                name: '地区生产总值',
                // 强制设置图形为方。
                icon: 'rect',
                itemStyle: {
                    color: 'rgba(0, 152, 250, 1)',
                    borderColor: 'rgba(0, 152, 250, 1)'
                }
            }] 
        },
        // 直角坐标系内绘图网格
        grid: {
            show: false, // 是否显示直角坐标系网格,外边框
            top: '30', // 离容器左侧的距离
            right: '10', // 离容器上侧的距离
            left: '10', // 离容器左侧的距离
            bottom: '0', // 离容器底部的距离
            borderColor: '#ff0', // 外边框颜色
            containLabel: true // 是否包含坐标轴的刻度标签,默认为false；true时防止标签溢出
        },
        // 提示框组件
        tooltip: {
            trigger: 'axis', // 触发类型,axis:坐标轴触发
            axisPointer: {
                // 坐标轴指示器配置项
                type: 'shadow', // 指示器类型:line、shadow、none、cross
                shadowStyle: {
                    color: 'rgba(216, 216, 216, 0.1)'
                }
            },
            backgroundColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮层的背景颜色
            borderColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮层的边框颜色
            textStyle: {
                color: '#B1DEFF',
                fontSize: '24',
                fontFamily:'PangMenZhengDao',
            },
            formatter: function (params:any) {
                // 2.回调函数,可return dom 自定义样式
                return (
                    params[0].name +(timeType=='year'?'年<br>':'<br>')  + 
                    '<div style="display:flex;align-items: center;">' + params[0].seriesName +'：<span style="color: #fff;margin-right:6px;">'+ params[0].value + '</span>' + '<span style="font-size:14px;color: #B1DEFF;">亿元</span></div>'
                )
            }
        },
        // 图表背景色
        backgroundColor: 'transparent',
        // x 轴设置
        xAxis: [
            {
                type: 'category',
                nameLocation: 'end', // X轴名称位置
                nameTextStyle: {
                // X轴名称样式
                color: '#fff',
                fontWeight: 'bold'
                },
                nameGap: 10, // X轴名称与轴线之间的距离
                nameRotate: 0, // 坐标轴名称旋转
                axisLabel: {
                    // X轴类目名称样式
                    // interval: 'auto',
                    verticalAlign: 'middle',
                    lineHeight: 16,
                    margin: 20,
                    color: '#fff',
                    fontSize: 12,
                    fontFamily:'PangMenZhengDao',
                    rotate: 0,
                },
                axisLine: {
                    // X轴轴线设置
                    show: true,
                    lineStyle: {
                        color: 'rgba(216, 216, 216, 0.5)',
                        width: 1
                    }
                },
                axisTick: {
                    // X轴刻度相关设置
                    show: false
                },
                splitLine: {
                    // 横向分隔线
                    show: false
                },
                axisPointer: {
                    type: "line",
                    lineStyle: {
                        color: "rgba(216, 216, 216, 0.1)",
                        type: "solid",
                        width: 37,
                    },
                },
                // 类目数据
                data: yearData
            }
        ],
        // y轴设置
        yAxis: [
            {
                min: 0, // 坐标轴刻度最小值
                axisLine: {
                    // y轴轴线设置
                    show: true,
                    lineStyle: {
                        color: 'rgba(216, 216, 216, 0.5)',
                        width: 1
                    }
                },
                axisLabel: {
                    // y轴刻度标签
                    formatter: '{value}',
                    inside: false, // 刻度标签是否朝内，默认朝外
                    textStyle: {
                        color: 'rgba(255, 255, 255, 1)',
                        fontSize: 12,
                        fontFamily:'PangMenZhengDao'
                    }
                },
                axisTick: {
                    // 刻度设置
                    show: false
                },
                splitLine: {
                    // 纵向分隔线
                    show: true,
                    lineStyle: {
                        color: 'rgba(216, 216, 216, 0.2)',
                        type: 'dashed'
                    }
                }
            }
        ],
        series: [
            {
                name: '地区生产总值',
                type: 'line',
                markPoint: 'arrow',
                lineStyle: {
                    color: 'rgba(0, 152, 250, 1)', // 线条颜色
                    shadowColor: 'rgba(0, 152, 250, 1)', // 设置阴影颜色  
                    shadowBlur: 10 // 设置阴影的模糊大小
                },
                itemStyle: {
                    color: "rgba(30, 231, 231, 1)", //点的颜色
                    borderColor: "rgba(30, 231, 231, 0.4)",
                    borderWidth: 6,
                    shadowColor: "rgba(30, 231, 231, 0.2)",
                    shadowBlur: 0,
                    shadowOffsetY: 1,
                    shadowOffsetX: 1,
                },
                emphasis: {
                    itemStyle: {
                        // 鼠标经过时：
                        borderColor: "rgba(255, 255, 255, .4)",
                        shadowColor: "rgba(255, 255, 255, 0.2)",
                        color: "rgba(255, 255, 255, 1)",
                        borderWidth: 6,
                        shadowBlur: 0,
                        shadowOffsetY: 1,
                        shadowOffsetX: 1,
                    },
                },
                symbol: "circle", //将小圆点改成实心 不写symbol默认空心
                symbolSize: 8,
                areaStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 94, 255, 0.36)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(0, 94, 255, 0.03)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                },
                data: areaData
            }
        ]
    }
    myChart.setOption(option);
    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    }
  onMounted(() => {
    getData() // 使用方法放在onMounted中
  });
  </script>
<style lang="scss" scoped>
.right-two-box {
    width: 1004px;
    height: 192px;
    margin: 0 auto;
    #right-echarts-two-id {
        width: 100%;
        height: 100%;
    }
}
</style>