echarts 共用y轴 实现左右布局

萝莉爱裸奔
929 阅读1分钟

老规矩 先看效果图

image.png

都比较简单 就直接看源代码吧

<template>
  <div class="card-lxzb">
    <CardTitle title="作物分布" />
    <div id="zwEcharts" style="width: 100%; height: 100%; background-color: rgba(32, 42, 68, 0.3)"></div>
  </div>

</template>

<script setup lang="ts">

import { $message } from "@mars/components/mars-ui"
import { onMounted, onUnmounted, ref } from "vue"
import { countProductionAreaDistribution } from "@mars/common/api/jsyApi/scgl"
import * as echarts from "echarts";
import * as mapWork from "@mars/widgets/data-show/echarts-chart/map";
import { events } from "@mars/pages/zhts/main"
let myChart: any
const dataList = ref([])

// 加载数据
const getData = async (sourceId) => {
  const { code, data, message } = await countProductionAreaDistribution({...sourceId})
  if (code === 200) {
    dataList.value = data
    await getEcharts(data)
  } else {
    $message(message)
  }
}

// echarts
const getEcharts = async (data) => {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById("zwEcharts"), "dark")

  // 指定图表的配置项和数据
  const option = getOption(data)

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

function getOption(data) {
  let legendData = data.legend.data
  let axisData = data.axis.data
  let xmSeries = data.series[0]
  let ycSeries = data.series[1]

  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    axisPointer: {
      link: { xAxisIndex: 'all' }
    },
    legend: {
      data: legendData,
      x: "center",
      top:16,
      itemGap: 240,
      icon:"diamond",
      itemHeight: 8, //修改icon图形大小
      itemWidth: 8, //修改icon图形大小
      textStyle: {
        fontSize: 13,
        color: '#FFFFFF'
      },
    },
    grid: [{
      top: 40,
      bottoom: 20,
      left: 10,
      height: '80%',
      //right: '40%',
      width: '40%'
    }, {
      top: 40,
      bottoom: 20,
      //left: '60%',
      height: '80%',
      right: 10,
      width: '41%'
    }],
    xAxis: [
      {
        show: false,
        // type: 'value',
        boundaryGap: false,
        inverse: true,
        position: 'right',
        axisTick: {
          show: false
        },
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
      },
      {
        show: false,
        // type: 'value',
        gridIndex: 1,
        boundaryGap: false,
        axisTick: {
          show: false
        },
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
      }
    ],
    yAxis: [
      {
        // show:false,
        splitLine: { show: false }, //去除网格线
        type: 'category',
        position: 'right',
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          fontSize: 10,
          textStyle: {
            color: "#FFFFFF",
          },
        },
        axisLine: {
          show:false,
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
        data: axisData
      },
      {
        // show:false,
        splitLine: { show: false }, //去除网格线
        type: 'category',
        gridIndex: 1,
        inverse: true,
        axisTick: {
          show: false
        },
        axisLabel: {
          fontSize: 10,
          textStyle: {
            color: "#FFFFFF",
          },
        },
        axisLine: {
          show:false,
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
        data: axisData
      }
    ],
    series: [
      {
        label: {
          show: false
        },
        barWidth: "10",
        hoverAnimation: false,
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, [{//代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: '#00D5E1'
              }, //柱图渐变色
                {
                  offset: 1, //指100%处的颜色
                  color: '#008AE1'
                }
              ]
            ),
          }
        },
        ...xmSeries
      },
      {
        label: {
          show: false,
          //position: 'left'
        },
        barWidth: "10",
        xAxisIndex: 1,
        yAxisIndex: 1,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, [{//代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: '#00E15A'
              }, //柱图渐变色
                {
                  offset: 1, //指100%处的颜色
                  color: '#3FFDC0'
                }
              ]
            ),
          }
        },
        ...ycSeries
      }
    ]
  }

  return option
}

onMounted(() => {
  events.on("sourceId-toolber", (val: any) => {
    getData(val)
  })
})

onUnmounted(() => {
  // 销毁操作
})

</script>

完整代码

<template>
  <div class="card-lxzb">
    <CardTitle title="作物分布" />
    <div id="zwEcharts" style="width: 100%; height: 100%; background-color: rgba(32, 42, 68, 0.3)"></div>
  </div>

</template>

<script setup lang="ts">

import { $message } from "@mars/components/mars-ui"
import { onMounted, onUnmounted, ref } from "vue"
import { countProductionAreaDistribution } from "@mars/common/api/jsyApi/scgl"
import * as echarts from "echarts";
import * as mapWork from "@mars/widgets/data-show/echarts-chart/map";
import { events } from "@mars/pages/zhts/main"
let myChart: any
const dataList = ref([])

// 加载数据
const getData = async (sourceId) => {
  const { code, data, message } = await countProductionAreaDistribution({...sourceId})
  if (code === 200) {
    dataList.value = data
    await getEcharts(data)
  } else {
    $message(message)
  }
}

// echarts
const getEcharts = async (data) => {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById("zwEcharts"), "dark")

  // 指定图表的配置项和数据
  const option = getOption(data)

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

function getOption(data) {
  let legendData = data.legend.data
  let axisData = data.axis.data
  let xmSeries = data.series[0]
  let ycSeries = data.series[1]

  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    axisPointer: {
      link: { xAxisIndex: 'all' }
    },
    legend: {
      data: legendData,
      x: "center", //x轴的位置 可为 ‘left’、‘right’，数字‘0-999’，y轴一样
      top:16,
      itemGap: 240, 两个图标的距离
      icon:"diamond", 
      itemHeight: 8, //修改icon图形大小
      itemWidth: 8, //修改icon图形大小
      textStyle: {
        fontSize: 13,
        color: '#FFFFFF'
      },
    },
    grid: [{
      top: 40,
      bottoom: 20,
      left: 10,
      height: '80%',
      //right: '40%',
      width: '40%'
    }, {
      top: 40,
      bottoom: 20,
      //left: '60%',
      height: '80%',
      right: 10,
      width: '41%'
    }],
    xAxis: [
      {
        show: false,
        // type: 'value',
        boundaryGap: false,
        inverse: true,
        position: 'right',
        axisTick: {
          show: false
        },
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
      },
      {
        show: false,
        // type: 'value',
        gridIndex: 1,
        boundaryGap: false,
        axisTick: {
          show: false
        },
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
      }
    ],
    yAxis: [
      {
        // show:false,
        splitLine: { show: false }, //去除网格线
        type: 'category',
        position: 'right',
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          fontSize: 10,
          textStyle: {
            color: "#FFFFFF",
          },
        },
        axisLine: {
          show:false,
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
        data: axisData
      },
      {
        // show:false,
        splitLine: { show: false }, //去除网格线
        type: 'category',
        gridIndex: 1,
        inverse: true,
        axisTick: {
          show: false
        },
        axisLabel: {
          fontSize: 10,
          textStyle: {
            color: "#FFFFFF",
          },
        },
        axisLine: {
          show:false,
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
        data: axisData
      }
    ],
    series: [
      {
        label: {
          show: false
        },
        barWidth: "10",
        hoverAnimation: false,
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, [{//代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: '#00D5E1'
              }, //柱图渐变色
                {
                  offset: 1, //指100%处的颜色
                  color: '#008AE1'
                }
              ]
            ),
          }
        },
        ...xmSeries
      },
      {
        label: {
          show: false,
          //position: 'left'
        },
        barWidth: "10",
        xAxisIndex: 1,
        yAxisIndex: 1,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, [{//代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: '#00E15A'
              }, //柱图渐变色
                {
                  offset: 1, //指100%处的颜色
                  color: '#3FFDC0'
                }
              ]
            ),
          }
        },
        ...ycSeries
      }
    ]
  }

  return option
}

onMounted(() => {
  events.on("sourceId-toolber", (val: any) => {
    getData(val)
  })
})

onUnmounted(() => {
  // 销毁操作
})

</script>

<style lang="less" scoped>
.card-lxzb {
  position: absolute;
  top: 338px;
  bottom: 30px;
  left: 10px;
  width: 370px;
  z-index: 10000000;
  //height: 300px;
  background: rgba(5,28,50,0.5);

  .list {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    .item {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      height: 80px;
      //background-image: url("./img/icon-lxItem-bg.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;

      .item-img{
        margin-left: 20px;
        width: 44px;
        height: 44px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

      .item-content{
        flex:1;
        .name{
          margin-left: 20px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
        }
        .value{
          font-size: 20px;
          font-family: Arial;
          font-weight: bold;
          color: #01FFFD;
          margin-left: 5px;

          background: linear-gradient(0deg, #01FFFF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .unit{
          margin-left: 5px;
          width: 22px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
        }
      }

      .item-line{
        width: 1px;
        height: 30px;
        background: linear-gradient(0deg, #01F4F2 0%, #01F4F2 100%);
        opacity: 0.3;
      }
      .percentage{
        width: 100px;
        font-size: 22px;
        font-family: Arial;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;

        background: linear-gradient(0deg, #01FFFF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }



    }
  }


}
</style>
avatar
文章
阅读
粉丝