echarts 同x轴半实线半虚线图表

已于 2024-07-15 11:42:54 修改
阅读量316 收藏
点赞数
分类专栏： # echarts实践 文章标签： vue.js
于 2023-11-13 19:57:20 首次发布
那一抹阳光--铁子--有没坑位推荐一哈
本文链接：https://blog.csdn.net/hr_beginner/article/details/134385149
版权

需求背景

需要实线一个同x轴，且图表的的多图表联动效果

解决效果

在这里插入图片描述

视频效果

ISQQW代码地址

链接

index.vue

<!--/**
   * @author: liuk
   * @date: 2023/11/13
   * @describe: 共x轴，半虚线天气图表
  */-->
<template>
  <div ref="chatDom" class="HeatPredictionChart"></div>
</template>

<script lang="ts" setup>
import {ref, onMounted, watch, nextTick} from "vue"
import * as echarts from 'echarts'
import moment from "moment";

// Props
const props = defineProps(['data', 'typeArr'])

let myChart = null // Vue3 使用 proxy 对象代理，而 echarts 则使用了大量的全等（===）, 对比失败从而导致了bug。
const chatDom = ref(null)

watch(() => props.typeArr, () => {
  const option = myChart.getOption()
  myChart.clear()
  myChart.setOption(renderFn(option, props.data, props.typeArr))
}, {deep: true})

watch(() => props.data, () => {
  nextTick(() => {
    const option = myChart.getOption()
    myChart.clear()
    myChart.setOption(renderFn(option, props.data, props.typeArr))
  })
}, {immediate: true})

const renderFn = (option, data, types) => {
  types = types.map(id => selectOptions.find(item => item.id === id))
  const day = data.heat_power_forecast_day[0]
  const thatDayTime = +new Date(day)  //指定天8点，秒级时间戳
  const curDayTime = new Date(new Date().toLocaleDateString()).setHours(8)//今天8点，秒级时间戳
  option.title[0].text = day?.slice(-5)
  option.yAxis[0].name = ''
  option.yAxis[1].name = ''
  option.series[2].name = ''
  option.series[2].data = []
  option.series[3].name = ''
  option.series[3].data = []
  option.series[4].data = []
  option.series[5].data = []
  if (moment(new Date()).format('YYYY-MM-DD') === day) { // 如果是当天
    const curRemainHourNum = new Date().getHours() <= 7 ? 8 - new Date().getHours() - 1 : 24 - new Date().getHours() + 8;
    option.series[4].data = data.t3_forecast_hours.slice(0, 24 - curRemainHourNum + 1).concat(data.t3_forecast_hours.slice(24 - curRemainHourNum - 1).fill('-'))
    option.series[5].data = data.t3_forecast_hours.slice(0, 24 - curRemainHourNum).fill('-').concat(data.t3_forecast_hours.slice(24 - curRemainHourNum))
    option.series[5].lineStyle.type = 'dashed'
    new Array(2).fill('').forEach((_, i) => {
      if (!types[i]) {
        option.series[i].data = []
        return
      }
      const arr = data[types[i].value]
      option.series[i].data = arr.slice(0, 24 - curRemainHourNum + 1).concat(arr.slice(24 - curRemainHourNum - 1).fill('-'))
      option.series[i].name = types[i].label
      option.series[i].lineStyle.type = 'solid'
      option.series[i].color = types[i].color
      option.series[i + 2].data = arr.slice(0, 24 - curRemainHourNum).fill('-').concat(arr.slice(24 - curRemainHourNum))
      option.series[i + 2].name = types[i].label
      option.series[i + 2].lineStyle.type = 'dashed'
      option.series[i + 2].color = types[i].color
      option.yAxis[i].name = types[i].label?.slice(-2) + ': ' + types[i].unit
    })
  } else {
    option.series[4].data = data.t3_forecast_hours
    new Array(2).fill('').forEach((_, i) => {
      if (!types[i]) {
        option.series[i].data = []
        return
      }
      option.series[i].data = data[types[i].value]
      option.series[i].name = types[i].label
      option.series[i].color = types[i].color
      option.series[i].lineStyle.type = thatDayTime - 24 * 60 * 60 * 1e3 >= curDayTime ? 'dashed' : 'solid'
    })
  }
  return option
}

onMounted(() => {
  drawChart()
  window.addEventListener('resize', () => {
    const option = myChart.getOption()
    myChart.clear()
    myChart.setOption(renderFn(option, props.data, props.typeArr))
  }, {passive: true});
})

const drawChart = () => {
  let chartDom = chatDom.value
  if (chartDom == '-') {
    return
  }
  echarts.dispose(chartDom)
  myChart = echarts.init(chartDom)
  const option = {
    title: {
      x: 'left',
      padding: [28, 0, 0, 10],
      text: '11-09',
      textStyle: {//设置主标题的文字风格
        color: "rgba(165,166,166,1)",  //字体颜色
        fontSize: 13,  //文字大小
        opacity: 0.9
      },
    },
    grid: [
      {
        top: '17%',
        left: 90,
        right: 90,
        height: '36%'
      },
      {
        top: '60%',
        left: 90,
        right: 90,
        height: '36%'
      }
    ],
    axisPointer: {
      type: 'shadow',
      link: {xAxisIndex: 'all'},
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 设置指示线
        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
        lineStyle: {
          color: '#8C8C8C',
          type: [4.5, 5],	 //设置折线类型
          dashOffset: 5,
          width: 2,
        }
      },
      transitionDuration: 0,
      confine: true,
      borderRadius: 2,
      borderWidth: 0,
      backgroundColor: 'rgba(149,149,149,0.15)',
      backdropFilter: 'brightness(80%) blur(4px)',
      borderColor: 'rgba(149,149,149,0.8)',
      textStyle: {fontSize: 14, color: '#fff'},
      formatter: function (param) {
        let data = param.filter(item => item.data !== '-' && item.name)
        data = data.filter((item, i) => data.findIndex(x => x.seriesName === item.seriesName) === i)
        const dataIndex = param[0].dataIndex
        return `
          <div class="detailChat-popup">
            <p class="top">
                <span>${props.data.heat_power_forecast_day[dataIndex]}</span>
                <span>${data[0].name || '暂无'} </span>
            </p>
            ${
              data.map(item => {
                let unit
                switch (true) {
                  case ['实际热耗', '预测热需'].includes(item.seriesName):
                    unit = 'GJ'
                    break
                  case ['预测供水温度', '预测回水温度', '室外温度'].includes(item.seriesName):
                    unit = '℃'
                    break
                  case ['预测流量'].includes(item.seriesName):
                    unit = 'T'
                    break
                }
                return `
                  <p class="item">
                      <i class="icon" style="background-color:${item.color}"></i>
                      <span class="name">${item.seriesName}</span>
                      <span>${item.data}</span>
                      <span>${unit}</span>
                  </p>`
              }).join("")
            }
          </div>
        `
      }
    },
    xAxis: [
      {
        data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
        boundaryGap: false,
        min: 0,
        axisLine: {
          show: true,
        },
        position: 'top',
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 80,
          show: true,
          textStyle: {
            color: 'rgba(165,166,166,1)',
            fontSize: '12',
          },
        },
      },
      {
        gridIndex: 1,
        data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
        boundaryGap: false,
        min: 0,
        axisLabel: {show: false},
        axisLine: {
          show: false,
        },
        position: 'top',
        axisTick: {
          show: false,
        }
      }
    ],
    yAxis: [
      {
        gridIndex: 0,
        name: '热耗：GJ/h',
        nameGap: '25',
        offset: 20,
        nameTextStyle: {
          padding: [0, 55, 5, 0],
          color: '#fff',
          fontSize: '14',
          opacity: 0.7,
          align: 'center'
        },
        nameLocation: 'end',
        position: 'left',
        axisTick: {show: false},
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(52,52,52,1)'
          }
        },
        axisLine: {show: false,},
        axisLabel: {
          show: true,
          showMinLabel: false,
          textStyle: {
            color: 'rgba(165,166,166,1)',
            fontSize: '14',
          }
        },
      },
      {
        gridIndex: 0,
        nameGap: '25',
        name: '流量：T/h',
        offset: 20,
        nameTextStyle: {
          padding: [0, 55, 5, 0],
          color: '#fff',
          fontSize: '14',
          opacity: 0.7,
          align: 'center'
        },
        nameLocation: 'end',
        position: 'right',
        type: 'value',
        axisTick: {show: false},
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(52,52,52,1)'
          }
        },
        axisLine: {show: false,},
        axisLabel: {
          show: true,
          showMinLabel: false,
          textStyle: {
            color: 'rgba(165,166,166,1)',
            fontSize: '14',
          }
        },
      },
      {
        gridIndex: 1,
        name: '室外温度/°C',
        nameGap: '25',
        offset: 20,
        nameTextStyle: {
          padding: [0, 55, 5, 0],
          color: '#fff',
          fontSize: '14',
          opacity: 0.7,
          align: 'center'
        },
        nameLocation: 'end',
        position: 'left',
        axisTick: {show: false},
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(52,52,52,1)'
          }
        },
        axisLine: {show: false,},
        axisLabel: {
          show: true,
          showMinLabel: true,
          textStyle: {
            color: 'rgba(165,166,166,1)',
            fontSize: '14',
          }
        },
      },
    ],
    series: [
      {
        name: '实际热耗',
        type: 'line',
        showSymbol: false,
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'],
        xAxisIndex: 0,
        yAxisIndex: 0,
        lineStyle: {
          normal: {
            type: 'solid'
          }
        },
        color: '#ffffff'
      },
      {
        name: '实际热耗',
        type: 'line',
        showSymbol: false,
        data: ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
        xAxisIndex: 0,
        yAxisIndex: 1,
        lineStyle: {
          normal: {
            type: 'dashed'
          }
        },
        color: '#ffffff'
      },
      {
        name: '实际热耗',
        type: 'line',
        showSymbol: false,
        data: ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
        xAxisIndex: 0,
        yAxisIndex: 0,
        lineStyle: {
          normal: {
            type: 'dashed'
          }
        },
        color: '#ffffff'
      },
      {
        name: '实际热耗',
        type: 'line',
        showSymbol: false,
        data: ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
        xAxisIndex: 0,
        yAxisIndex: 1,
        lineStyle: {
          normal: {
            type: 'dashed'
          }
        },
        color: '#ffffff'
      },
      {
        name: '室外温度',
        type: 'line',
        showSymbol: false,
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'],
        xAxisIndex: 1,
        yAxisIndex: 2,
        color: 'rgba(0,207,163,1)',
      },
      {
        name: '室外温度',
        type: 'line',
        showSymbol: false,
        data: ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
        xAxisIndex: 1,
        yAxisIndex: 2,
        color: 'rgba(0,207,163,1)',
      },
    ]
  }
  option && myChart.setOption(option)
}

const selectOptions = [
  {
    id: '1',
    value: 'heat_power_forecast_loss',
    label: '实际热耗',
    color: '#ffffff',
    unit: 'GJ/h'
  },
  {
    id: '2',
    value: 'heat_power_forecast_hours',
    label: '预测热需',
    color: 'rgba(255,191,0,1)',
    unit: 'GJ/h'
  },
  {
    id: '3',
    value: 'tt011_forecast_hours',
    label: '预测供水温度',
    color: 'rgba(255, 64, 25,1)',
    unit: '°C'
  },
  {
    id: '4',
    value: 'ft021_forecast_hours',
    label: '预测流量',
    color: 'rgba(184,102,238,1)',
    unit: 'T/h'
  },
  {
    id: '5',
    value: 'tt011_forecast_hours',
    label: '预测回水温度',
    color: 'rgba(0, 132, 255,1)',
    unit: '°C'
  },
]
</script>

<style lang="scss" scoped>
.HeatPredictionChart {
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss">
.detailChat-popup {
  overflow: hidden;

  .top {
    margin-bottom: 5px;
  }

  .item {
    display: flex;
    align-items: center;
    margin: 10px 0;

    &:last-child {
      margin-bottom: 0;
    }

    .icon {
      display: inline-block;
      width: 12px;
      height: 2px;
      margin-right: 10px;
      border-radius: 2px;
    }

    .name {
      margin-right: 40px;

    }
  }
}
</style>
柳晓黑胡椒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery获取属性的值
张音乐的博客
08-13 5150
<!-- my-name为自定义属性 --> <span id="test" name="test" my-name="1234"></span> $("#test").attr("my-name"); //结果为1234 $("#test").attr("my-name","12345"); //给my-name赋值 推荐一个公众号 号主...
echarts 折线图 一半虚线一半实线
markRoyce的博客
03-13 1460
echarts 折线图 --- 根据服务端返回的数据列表字段来判断是否是历史数据，还是未来数据，历史数据展示为实现，未来数据展示为虚线，虚线实线之间平滑过渡。
echarts 预测图 一半实线一半虚线
最新发布
Y13349887034的博客
01-05 898
echarts预测图的配置项，实现一半实线一半虚线的形式
echarts如何修改x轴的虚线
有问题可关注公众号：前端研究院 后台输入问题回复
10-23 1万+
splitLine: { show: true, lineStyle: { type: 'solid', color:'#113d5e' } }, 修改好的样式如： ...
Echarts中虚线与x轴刻度线没对齐解决办法
A15029296293的博客
09-14 811
解决这个问题的方法非常简单，只需要在xAxis配置项中添加axisTick属性，然后添加alignWithLabel:true就可以了。
ECharts 折线图(line)系列使用详解
旭东怪的博客
07-14 6765
1 Series 说明：系列列表。 1.1 series.lineStyle 说明：线条样式。 1.1.1 series.lineStyle.color 说明：线条颜色。 默认值："#000" 1.1.2series.lineStyle.width 说明：线条宽度。 默认值：2。 1.1.3series.lineStyle.type 说明：线条类型。 默认值：'solid'。 可选值： (1) 'solid'，实线。 (2) 'dotted'...
echarts柱状图的x轴（刻度、标签名、刻度线），y轴（单位、刻度线样式（虚线、实线、）、字体样式（颜色、大小），图例排列 、柱状宽度、颜色，柱状背景）完整的柱状图
weixin_45372418的博客
12-20 2万+
完整的数据大屏柱状图要从哪些方面考虑完整的数据大屏柱状图要从哪些方面考虑1.x轴要考虑那些？
Echarts14--虚实线结合图
web
02-24 1557
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, '', '', ''], type: 'line',
echarts 实线 虚线
xiaosi1413的博客
06-04 1384
<template> <div class="hello"> <div>折线图</div> <div id="line"></div> </div> </template> <script> export default { props: ['bar','info'], data () { return { } }, mount
echarts实现多维坐标轴
09-17
最终，ECharts 将根据以上配置在同一个图表中绘制两条不同的线，每条线对应一个坐标轴，这样就可以在同一坐标系中清晰地对比不同单位的数据了。 总结来说，ECharts 实现多维坐标轴的关键在于正确配置 `yAxis`，...
echarts 双折线图 实现 与虚线
05-15
echarts 双折线图 实现 与虚线
echats地图资源 来源于https://www.isqqw.com/
12-01
echats地图资源 来源于https://www.isqqw.com/
Antv/G2 图表背景实线改为虚线
且听风吟的博客
11-10 396
Antv/G2 图表背景实线改为虚线
echarts折线图一半实线一半虚线
07-20
您可以使用 ECharts 的 lineStyle 属性来实现折线图一半实线一半虚线的效果。具体做法是设置折线的 lineStyle 属性为一个包含两个对象的数组，每个对象分别定义实线和虚线的样式。 以下是一个示例代码： ```...
echarts 实线改变成虚线
热门推荐
行言Tang、
06-17 6万+
option = {     title: {         text: '折线图堆叠'     },     tooltip: {         trigger: 'axis'     },     legend: {         data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']     },     grid: {        
echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标
tangdou369098655的博客
06-22 1万+
本文已参与「新人创作礼」活动，一起开启掘金创作之路。 1.饼图怎么调整左右位置 只需要调整option.series里的center: [‘30%’, ‘50%’] 2.更改x轴样式,控制样式里的X轴字在中间, 距离Y轴还有点距离 3.echarts将网格线设置成虚线 4.x轴刻度居中 5.echarts X轴区间柱形图，X轴 刻度数组长度 比 数据数组长度 多一个 6.设置y轴区间，最大值最小值,显得数据波动很好~~~ 7.dataZoom控制Y轴滚动 看图 鼠标滚动
echarts折线图、柱形图，虚线
weixin_46115723的博客
04-20 2030
设置echarts轴线，X轴，Y轴，虚线
echarts xy轴虚线展示 字体颜色修改
WMW_wmw的博客
07-26 1512
代码】echartsxy轴虚线展示字体颜色修改。
echarts中折线标识、线条渐变、虚线设置、双条折线数据个数不同报错问题解决
qq_39536826的博客
08-31 2219
先上整体效果图： 1、虚线+折线渐变、折线两端透明度设置如下 代码如下： //去年虚折线代码 //虚线+折线渐变、折线两端透明度设置 代码如下： series: [ { name: "去年", type: "line", symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆 showAllSymbol: true, symbolSize: 0, smooth: true, lineSt
Echarts双折线图：实线与虚线展示实例与实现步骤
这些数组的值对应了图表的x轴和y轴数据。值得注意的是，`attainment_rate`和`productivity`数组是对`plan_production`和`actual_production`进行百分比计算得到的。 在数据处理部分，通过`for`循环，对数组进行了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳晓黑胡椒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值