echarts 公共

<template>
  <div class="w-full h-full">
    <div class="w-full h-full" ref="charts" > </div>
    <!-- v-show="!value.others || value.series && (value.series.data && value.series.data.length || value.series[0] && value.series[0].data && value.series[0].data.length)"
    <div class="w-full h-full flex" v-else style="justify-content: center;color:#666; font-size: 18px; align-items: center;">暫無數據</div> -->
  </div>
</template>

<script>
export default {
  props:{
    value:{
      type:Object,
      default:()=>({series:{}})
    },
    barType:String, // gradient: 漸變
    chartType:String, //vertical: 垂直
  },
  data() {
    return {
      chart:null
    }
  },
  mounted() {
    this.init()
  },

  methods: {
    init(){
      this.chart = this.echarts.init(this.$refs.charts)
      this.chart.setOption(this.getOption())
      this.chart.on('click',  (params)=> {
        this.$emit('chart', params)
        console.error('chart',params);
      });
    },
    reload(){
      this.chart.setOption(this.getOption())
    },
    getOption(){
      let barDefault = {
        data: [],
        type: 'bar',
        barWidth:20,
        showBackground: false,
        color: [ '#2879ff' ],
        // backgroundStyle: {
        //   color: 'gray'
        // },
        itemStyle: {
          borderRadius: this.value.chartType == 'vertical' ? [0, 20, 20, 0] : [20, 20, 0, 0],
          width:20,
          
      // this.value.barType:String, // gradient: 漸變
      // this.value.chartType:String, //vertical: 垂直
          color: this.value.barType == 'gradient'  ? 
          // this.value.chartType == 'vertical' ? 
          new this.echarts.graphic.LinearGradient(...(this.value.chartType == 'vertical' ? [1, 0, 0, 0] : [0, 0, 0, 1]), [
            { offset: 0, color: '#7BD7FF' },
            { offset: 1, color: '#4EA1FF' }
          ]) : ''
        },
      }
      let a = {
            type: 'value',
            splitLine: {
              show: true ,
              lineStyle: {
                color: ['#2f4f72'] ,
              }
            },
            axisLabel:{
              color:'#7e9bc3',
            },
          },
          b = {
            type: 'category',
            // data: [],
            data:this.value.series?.data?.map?.((o,i)=> i)||[],
            axisTick:{show:false},
            axisLine: {
              show: true ,
              lineStyle: {
                color: '#2f4f72' ,
                width: 1 ,
              }
            },
            axisLabel:{
              color:'#7e9bc3',
            },
          },
      xAxis={}, yAxis = {}
      xAxis = this.value.chartType == 'vertical' ? a : b;
      yAxis = this.value.chartType == 'vertical' ? b : a;
      const option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默認爲直線，可選爲：'line' | 'shadow'
          },
          // textStyle: {
          //   fontSize: 18,
          // },
          // formatter: (params) => {
          //   return `${params[0].name} :  ${params[0].value || 0} `;
          // },
        },
        xAxis: Array.isArray(this.value.xAxis) ? this.value.xAxis.map(o=> ({ ...xAxis, ...o })) : { ...xAxis, ...this.value.xAxis },
        yAxis: Array.isArray(this.value.yAxis) ? this.value.yAxis.map(o=> ({ ...yAxis, ...o })) : { ...yAxis, ...this.value.yAxis },
        series: [
          ...(this.value?.series ? Array.isArray(this.value?.series) ? this.value.series?.map?.(o=> ({...barDefault, ...o})) : [{...barDefault, ...this.value.series}] : [barDefault])
        ],
        ...this.value.others
      }
      // console.error("🚀 ~ getOption ~ option:", JSON.stringify(option))
      return option;
    }
  },
};
</script>

<style lang="scss" scoped>
.h-full{
  height: 100%;
}
.w-full{
  width: 100%;
}
</style>

<!--
data = {
  series:{
    data: chartData.map(({chemicalCount})=> chemicalCount)
  },
  xAxis:{
    data: chartData.map(({name})=> name)
  }
}

// 圓
option = { 
  others:{
    graphic: {
      type: "text",
      left: params?.graphicLeft || 340,
      top: "center",
      style: {
        text:`總數量\n\n100`,
        textAlign: "center",
        fill: "#fff",
        width: 30,
        height: 30,
        fontSize: 18
      }
    },
    tooltip:{},
    xAxis:{
      show:false,data:[],
    },
    yAxis:{
      show:false,
    },
    legend: {
      orient: 'vertical',
      top: 'center',
      // right: '250',
      icon:'circle',
      itemHeight: 12, // 修改圓形小圖標的大小
      ...params.legend,
      textStyle: {
        fontSize: 24, // 可控制每個legend項的間距
        color: "#fff",
        rich: {
          bg:{
            width: '100%',
            height: 1,
            backgroundColor: '#DCDFE6'
          },
          oneone: {
            width:40,
            fontSize: 12,
            fontWeight: "bolder",
          },
          twotwo: {
            width: 60,
            fontSize: 12,
          },
        },
      },
      formatter: (name) => {
        let total = 0; // 用於計算總數
        let target; // 遍歷拿到數據
        for (let i = 0; i < data.length; i++) {
          total += data[i].value;
          if (data[i].name == name) {
            target = data[i].value;
          }
        }
        let v = ((target / total) * 100).toFixed(2);
        return `{oneone|${name}}  {twotwo|${target}}\n{bg|}`;
      },
    },
    series: {
      name: '',
      type: 'pie',
      radius: ['45%', '60%'],
      center: ['50%', '30%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#153f6e',
        borderWidth: 0,
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      ...params.series,
      data,
    }
  }
}
-->