echarts实现上下拼接两个折线图,Y轴在一侧,不同比例的高,且合并tooltip

  • 实现效果
    在这里插入图片描述

  • 说明

    •     grid:[
          //0降雨
          {x: '8%', y: '7%',height: '25%'},
          //流量
          {x: '8%', y2: '7%', height: '52%',bottom: '70px',}
          ],
      
  • 完整代码

    init() {
      let option = {
        //提示框
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid:[
          //0降雨
          {x: '8%', y: '7%',height: '21%'},
          //流量
          {x: '8%', y2: '7%', height: '48%',bottom: '70px',}
        ],
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          iconStyle: {
            borderColor: "#c7d8f8",
          },
        },
        //图标上方提示
        legend: {
          data: [
            { name: '流量', textStyle: { color: '#00fa9a' } },
            { name: '雨量', textStyle: { color: '#6495ed' } },
          ],
          orient: "horizontal",
          x: "center",
          y: "top",
          backgroundColor: "none",
          borderColor: "#ccc",
          borderWidth: 0, 
          padding: 5, 
          itemGap: 10, 
          itemWidth: 20, 
          itemHeight: 14, 
          textStyle: {
            color: "#c7d8f8", 
          },
        },
        calculable: true,
        axisPointer: {
          link: { xAxisIndex: 'all' },
        },//合并tooltip
        xAxis: [
          {
            show:false,
            type: "category",
            gridIndex: 0, // 与grid数组对应
            data: this.$store.state.map.EchartsData1,
            axisLine:{
              show:true,
              lineStyle:{color:'#c7d8f8'},
              onZero: false
            },
          },
          {
            type: "category",
            gridIndex: 1,// 与grid数组对应
            data: this.$store.state.map.EchartsData1,
            axisLine:{
              show:true,
              lineStyle:{color:'#c7d8f8'},
              onZero: false
            },
          },
        ],
        yAxis: [
          {
            name: "流量(m³/s)",
            type: "value",
            gridIndex:1, // 与grid数组对应
            nameLocation:'middle',
            nameGap: 40,
            axisLine:{
              show:true,
              lineStyle:{color:'#c7d8f8'},
            },
          },
          {
            name: "雨量(mm)",
            nameLocation:'middle',
            nameGap: 40,
            type: "value",
            axisLine:{
              show:true,
              lineStyle:{color:'#c7d8f8'},
            },
            inverse: true,
          },
        ],
        series: [
          {
            name: "流量",
            type: "line",
            smooth: true,
            xAxisIndex:1, // 与X轴数组对应
            yAxisIndex: 0,
            data: this.$store.state.map.EchartsData2,
            itemStyle: {
              normal: {
                color: "#00fa9a",
              },
            },
          },
          {
            name: "雨量",
            type: "bar",
            barCategoryGap:'0%',
            smooth: true,
            yAxisIndex: 1,
            xAxisIndex:0,
            data: this.$store.state.map.EchartsData3,
            itemStyle: {
              normal: {
                color: "#6495ed",
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
            xAxisIndex: [0,1],
          },
          {
            start: 0,
            end: 100,
          },
        ],
      };

      let myChart = echarts.init(document.querySelector(".charts"));
      myChart.setOption(option, true);
    },
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
首先,你需要安装 Echarts 和 Vue3,可以通过以下命令进行安装: ``` npm install echarts vue@next ``` 然后,在你的 Vue3 项目中,创建一个组件,例如 `DoubleLineChart.vue`,并在模板中添加一个 div 元素,用于渲染 Echarts 图表: ```html <template> <div ref="chart" style="height: 500px"></div> </template> ``` 在组件中,你需要引入 Echarts 和定义图表的配置选项: ```typescript import { defineComponent } from 'vue'; import * as echarts from 'echarts'; export default defineComponent({ name: 'DoubleLineChart', props: { data: { type: Object, required: true, }, }, mounted() { const chart = echarts.init(this.$refs.chart as HTMLDivElement); const option = { // 配置选项 }; chart.setOption(option); }, }); ``` 在配置选项中,你需要定义两个 y 轴,分别对应两条折线: ```typescript const option = { tooltip: { trigger: 'axis', }, legend: { data: ['销量', '访问量'], }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, }, xAxis: { type: 'category', boundaryGap: false, data: this.data.xData, }, yAxis: [ { type: 'value', name: '销量', axisLabel: { formatter: '{value} 件', }, }, { type: 'value', name: '访问量', axisLabel: { formatter: '{value} 次', }, }, ], series: [ { name: '销量', type: 'line', yAxisIndex: 0, data: this.data.y1Data, }, { name: '访问量', type: 'line', yAxisIndex: 1, data: this.data.y2Data, }, ], }; ``` 其中,`data` 属性是一个对象,包含了 x 轴和两个 y 轴的数据: ```typescript export default defineComponent({ name: 'DoubleLineChart', props: { data: { type: Object, required: true, }, }, mounted() { const chart = echarts.init(this.$refs.chart as HTMLDivElement); const option = { tooltip: { trigger: 'axis', }, legend: { data: ['销量', '访问量'], }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, }, xAxis: { type: 'category', boundaryGap: false, data: this.data.xData, }, yAxis: [ { type: 'value', name: '销量', axisLabel: { formatter: '{value} 件', }, }, { type: 'value', name: '访问量', axisLabel: { formatter: '{value} 次', }, }, ], series: [ { name: '销量', type: 'line', yAxisIndex: 0, data: this.data.y1Data, }, { name: '访问量', type: 'line', yAxisIndex: 1, data: this.data.y2Data, }, ], }; chart.setOption(option); }, }); ``` 最后,在父组件中,你可以使用 `DoubleLineChart` 组件,并传递数据给它: ```html <template> <div> <double-line-chart :data="chartData" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import DoubleLineChart from '@/components/DoubleLineChart.vue'; export default defineComponent({ name: 'App', components: { DoubleLineChart, }, data() { return { chartData: { xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], y1Data: [120, 200, 150, 80, 70, 110, 130], y2Data: [220, 180, 290, 130, 220, 200, 150], }, }; }, }); </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值