echarts双x轴案例

最新推荐文章于 2024-08-08 16:21:41 发布

小四是个处女座

最新推荐文章于 2024-08-08 16:21:41 发布

阅读量1.2k

点赞数 2

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.csdn.net/xiaosi1413/article/details/120786190

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客主要展示了如何使用ECharts组件在 Vue.js 应用中创建一个线图，包括设置图表标题、配置x轴和y轴、定义颜色和数据。通过监听`type`属性变化，动态调整x轴标签格式。示例代码详细地演示了如何初始化ECharts实例，设置图表选项，并在数据更新时更新图表。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <basic-container>
    <div class="inSec1Box">
      <!-- <div class="inSec1T">{{linEcharts.title}}</div> -->
      <div class="inSec1Con3">
        <!-- <div class="totalCon">
          <div class="totalNum">
            715
            <span>万</span>
          </div>
          <div>总冻结金额</div>
        </div> -->

        <div class="echartsBox" ref="totalMoney"></div>
      </div>
    </div>
  </basic-container>
</template>

<script>
export default {
  name: "lineEcharts",
  props: ["echarts", "linEcharts", "type"],
  data() {
    return {
      type2: "",
    };
  },
  methods: {
    //总冻结金额
    totalEchart() {
      var totalEchart = this.echarts.init(this.$refs.totalMoney);
      let option = {
        title: {
          text: this.linEcharts.title,
        },
        color: ["#32bdde", "#4e7dd7", "#ec5c5c"],
        legend: {
          itemWidth: 20,
          itemHeight: 6,
          right: "15%",
          data: this.linEcharts.legendData,
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b}月 : {c} 人",
        },
        grid: {
          left: "3%",
          right: "5%",
          top: "20%",
          bottom: "5%",
          containLabel: true,
        },
        // calculable: true,
        xAxis: [
          // {
          //   axisLabel: {
          //      formatter: this.type2 == 0 ? '{value}年':'{value}月'
          //   },
          //   data:this.linEcharts.linX
          // },
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            // axisLine: {
            //     onZero: false,
            //     lineStyle: {
            //         color: colors[1]
            //     }
            // },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "降水量  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                },
              },
            },
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
          },
          {
              type: 'category',
              position: 'bottom',
              offset: 25,
              axisPointer: {
                  type: 'none'
              },
              axisTick:{
                  show: false
              },
              axisLine:{
                  show: false
              },
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
          },
        ],
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#B7B7B7",
              fontSize: "12",
            },
            formatter: "{value}",
          },
          splitLine: {
            lineStyle: {
              color: "#F9F9F9",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#CACACA",
            },
          },
        },

        // series: this.linEcharts.linData
        series: [
          {
            name: "2015 降水量",
            type: "line",
            // xAxisIndex: 1,
            smooth: true,
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "2016 降水量",

            type: "line",
            smooth: true,
            data: [
              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3,
              0.7,
            ],
          },
        ],
      };

      totalEchart.setOption(option);
    },
  },
  mounted() {
    // this.totalEchart();
  },

  watch: {
    type: function (newVal, olaVal) {
      this.type2 = newVal;
      this.$forceUpdate();
      //  console.log("监听数据2342423",olaVal)
    },
    linEcharts: {
      handler(newVal) {
        this.$nextTick(() => {
          console.log(JSON.stringify(newVal), "newVal");
          setTimeout(() => {
            this.totalEchart();
          });
        });
      },
      deep: true,
      // immediate:true,
    },
  },
};
</script>