封装一个echarts的组件

父组件页面

<yyjlchart
            v-if="showyyjl"
            chartId="yyjllLine"
            :sourceData="sourceDatayyjl"
            :options="optionsyyjl"
          ></yyjlchart>

components: {
    LineEcharts,
    yyjlchart: () => import("../yyjlchart"),
  },


data() {
    return {
		showyyjl: false,
      optionsyyjl: {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "10%",
          top: "1%",
        },
      },
},
  methods: {

 async yyjlmap() {
      this.showyyjl = false;
      xxx调接口
数据返回后
				this.sourceDatayyjl.xdata = res.data.xData;
                this.sourceDatayyjl.ydata = res.data.medicateNames.reverse();
                this.sourceDatayyjl.result[0].data = res.data.yData.reverse();
                this.showyyjl = true;

      }

猪脚登场

<template>
  <div :id="chartId" class="box"></div>
</template>
<script>
export default {
  props: {
    // 品种下拉项
    chartId: {
      type: String,
      default: "",
    },
    // 数据源
    sourceData: {
      type: Object,
      default: () => {
        return {
          ydata: [],
          xdata: [],
          result: [],
        };
      },
    },
    // 特殊配置项
    options: {
      type: Object,
      default: () => {},
    },
    // 图表颜色
    colorList: {
      type: Array,
      default: () => [],
    },
    // 是否显示tooltip
    showTooltip: {
      type: Boolean,
      default: true,
    },
    // 是否显示X轴和Y轴
    showXorY: {
      type: Boolean,
      default: true,
    },
    xyLineColor: {
      type: Array,
      default: () => ["#E5E6E8", "#86909C"],
    },
  },
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart(data) {
      this.chartInstance = this.$echarts.init(
        document.getElementById(this.chartId)
      );
      let that = this;

     
      var hours = this.sourceData.ydata
      var days = this.sourceData.xdata
      var data = []
      var data1 = []



      let option = {
      // 放你的option 
      };

     

      this.chartInstance.setOption(option);
      window.addEventListener("resize", () => {
        this.chartInstance.resize();
      });
      const chartObserver = new ResizeObserver(() => {
        this.chartInstance.resize();
      });
      // 监听当前图表容器大小变化的时候resize
      chartObserver.observe(document.getElementById(this.chartId));
    },
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      // 此处的1920 为设计稿的宽度
      let fontSize = clientWidth / 1920;
      return res * fontSize;
    },
  },
};
</script>

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

option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['10-11', '10-12', '10-13', '10-14', '10-15', '10-16', '10-17', '10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24', '10-25', '10-26'],
    boundaryGap: true  // 让点之间有间隙
  },
  yAxis: {
    type: 'category',
    data: ['三维散', '复合多维', '硅烷', '硅烷1', '硅烷2'],
  },
  visualMap: {
    orient: 'horizontal',
    left: 'center',
    bottom: '0%',
    type: "piecewise",
    textStyle: {
      color: '#86909C' // 设置文字颜色
    },
    itemWidth: 25,
    itemHeight: 15,
    symbol: "square",
    inRange: {
      symbol: 'rect', // 设置图例为方形
    },
    show: false, // 显示 visualMap
    min: 1,
    max: 50,
    // backgroundColor: function(params) {
    //     console.log(params);
    //       // 根据 y 轴类别来动态设置颜色
    //       if (params.value[1] === '三维散') return '#9b59b6';  // 紫色
    //       if (params.value[1] === '复合多维') return '#e67e22'; // 橙色
    //       if (params.value[1] === '硅烷') return '#1abc9c'; // 绿色
    //       return '#1abc9c';
    //     }
  },
  series: [{
    name: '热力图',
    type: 'heatmap',
    data: [
      // 数据格式 [x, y, value]
      [0, 0, 40], [1, 0, 70], [2, 0, 50], [3, 0, 30], [4, 0, 0], [5, 0, 80], [6, 0, 60], [7, 0, 40], [8, 0, 50], [9, 0, 70], [10, 0, 60], [11, 0, 80], [12, 0, 50], [13, 0, 70], [14, 0, 40], [15, 0, 60],
      [0, 1, 60], [1, 1, 40], [2, 1, 90], [3, 1, 80], [4, 1, 60], [5, 1, 70], [6, 1, 50], [7, 1, 40], [8, 1, 80], [9, 1, 50], [10, 1, 60], [11, 1, 40], [12, 1, 60], [13, 1, 90], [14, 1, 70], [15, 1, 80],
      [0, 2, 30], [1, 2, 50], [2, 2, 60], [3, 2, 40], [4, 2, 70], [5, 2, 60], [6, 2, 80], [7, 2, 50], [8, 2, 40], [9, 2, 90], [10, 2, 70], [11, 2, 50], [12, 2, 60], [13, 2, 80], [14, 2, 50], [15, 2, 30]
    ],
     
    label: {
      show: true,
      color: '#fff'
    },
    // emphasis: {
    //   itemStyle: {
    //     shadowBlur: 10,
    //     backgroundColor:'#000',
    //     shadowColor: function(params) {
    //       // 根据 y 轴类别来动态设置颜色
    //       if (params.value[1] === '三维散') return '#9b59b6';  // 紫色
    //       if (params.value[1] === '复合多维') return '#e67e22'; // 橙色
    //       if (params.value[1] === '硅烷') return '#1abc9c'; // 绿色
    //       return '#1abc9c';
    //     }
    //   }
    // },
    itemStyle: {
              
            normal: {
                   borderColor: "#ffffff",
              borderWidth: "5",
                color: function(params) {
                    var colorList = ["#3aa0ff", "#f44336", "#ffc107"];
                 console.log(params);
                    params.value[1]==0
                 
                 if (params.value[1] === 0) return '#9b59b6';  // 紫色
                 if (params.value[1] === 1) return '#e67e22'; // 橙色
                 if (params.value[1] === 2) return '#1abc9c'; // 绿色

                }
            }
        },
  }]
};