{"remainingRequest":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\xq-web-bpm\\src\\components\\common\\HtChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\src\\components\\common\\HtChart.vue","mtime":1675071991631},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\thread-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport echarts from 'echarts'\r\nimport Chart from '@/components/common/Chart'\r\nconst BASE_OPTION = {\r\n    tooltip: {\r\n          trigger: 'item',\r\n          formatter: '{a} <br/>{b}:{c}家',\r\n        },\r\n        toolbox: {\r\n          show: true,\r\n        },\r\n        legend: {\r\n          type: 'scroll',\r\n          orient: 'horizontal',\r\n          left: '60px',\r\n          align: 'left',\r\n          top: '0px',\r\n          textStyle: {\r\n            color: '#8C8C8C',\r\n          },\r\n          height: 80,\r\n        },\r\n  }\r\nexport default {\r\n  name: 'HtChart',\r\n  components: {Chart},\r\n  \r\n  data() {\r\n    return {\r\n      dialogVisible: false,\r\n      chartStyle:'width:300px; height:180px; margin-left:20px',\r\n      gdOption: {\r\n        ...BASE_OPTION,\r\n        color: ['#37a2da','#32c5e9','#9fe6b8'],\r\n        series: [\r\n          {\r\n            name: '广东省',\r\n            type: 'pie',\r\n            radius: [0, 60],\r\n\r\n            data: [\r\n              {value: 8, name: '广州'},\r\n              {value: 10, name: '珠海'},\r\n              {value: 12, name: '佛山'}\r\n            ],\r\n          },\r\n        ],\r\n      },\r\n      hbOption:{\r\n        ...BASE_OPTION,\r\n        color: ['#ffdb5c','#ff9f7f','#fb7293'],\r\n        series: [\r\n          {\r\n            name: '湖北省',\r\n            type: 'pie',\r\n            radius: [0, 60],\r\n\r\n            data: [\r\n              {value: 7, name: '武汉'},\r\n              {value: 9, name: '宜昌'},\r\n              {value: 6, name: '荆州'}\r\n            ],\r\n          },\r\n        ],\r\n      },\r\n      zjOption:{\r\n        ...BASE_OPTION,\r\n        color: ['#e7bcf3','#8378ea','#ed7c2f'],\r\n        series: [\r\n          {\r\n            name: '浙江省',\r\n            type: 'pie',\r\n            radius: [0, 60],\r\n\r\n            data: [\r\n              {value: 7, name: '杭州'},\r\n              {value: 5, name: '台州'},\r\n              {value: 8, name: '金华'}\r\n            ],\r\n          },\r\n        ],\r\n      }\r\n    }\r\n  },\r\n  mounted() {\r\n    this.initHtChart()\r\n  },\r\n  methods: {\r\n    initHtChart() {\r\n      let htChart = echarts.init(document.getElementById('ht-chart'))\r\n      let data = {\r\n        xData: [\r\n          '广州',\r\n          '珠海',\r\n          '佛山',\r\n          '武汉',\r\n          '宜昌',\r\n          '荆州',\r\n          '杭州',\r\n          '金华',\r\n          '台州',\r\n        ],\r\n        yData: [8, 10, 12, 7, 9, 6, 7, 8, 5],\r\n      }\r\n      let option = {\r\n        title: {\r\n          text: '宏天客户分布图',\r\n          textStyle: {\r\n            color: '#333',\r\n            fontWeight: '800',\r\n            fontSize: `20`,\r\n          },\r\n          left: 'center',\r\n          top: '20px',\r\n        },\r\n        tooltip: {\r\n          trigger: 'axis',\r\n          axisPointer: {\r\n            type: 'shadow',\r\n          },\r\n        },\r\n        grid: [\r\n          {\r\n            top: 100,\r\n            bottom: 101,\r\n          },\r\n          {\r\n            height: 60,\r\n            bottom: 40,\r\n          },\r\n        ],\r\n        xAxis: [\r\n          {\r\n            type: 'category',\r\n            data: data.xData,\r\n            gridIndex: 0,\r\n            axisLabel: {\r\n              color: '#333',\r\n            },\r\n            axisLine: {\r\n              lineStyle: {\r\n                color: '#e7e7e7',\r\n              },\r\n            },\r\n            axisTick: {\r\n              lineStyle: {\r\n                color: '#e7e7e7',\r\n              },\r\n            },\r\n            zlevel: 2,\r\n          },\r\n          {\r\n            type: 'category',\r\n            gridIndex: 1,\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            zlevel: 1,\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: 'value',\r\n            gridIndex: 0,\r\n            axisLabel: {\r\n              color: '#333',\r\n            },\r\n            splitLine: {\r\n              lineStyle: {\r\n                type: 'dashed',\r\n              },\r\n            },\r\n            axisLine: {\r\n              lineStyle: {\r\n                color: '#ccc',\r\n              },\r\n            },\r\n            axisTick: {\r\n              lineStyle: {\r\n                color: '#ccc',\r\n              },\r\n            },\r\n          },\r\n          {\r\n            type: 'value',\r\n            gridIndex: 1,\r\n            axisLabel: {\r\n              show: false,\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            data: data.yData,\r\n            type: 'bar',\r\n            label: {\r\n              show: true,\r\n              position: 'top',\r\n              textStyle: {\r\n                color: '#555',\r\n              },\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: (params) => {\r\n                  let colors = [\r\n                    '#4150d8',\r\n                    '#28bf7e',\r\n                    '#ed7c2f',\r\n                    '#f2a93b',\r\n                    '#f9cf36',\r\n                    '#4a5bdc',\r\n                    '#4cd698',\r\n                    '#f4914e',\r\n                    '#fcb75b',\r\n                    '#ffe180',\r\n                    '#b6c2ff',\r\n                    '#96edc1',\r\n                  ]\r\n                  return colors[params.dataIndex]\r\n                },\r\n              },\r\n            },\r\n            xAxisIndex: 0,\r\n            yAxisIndex: 0,\r\n          },\r\n          {\r\n            data: [\r\n              {\r\n                name: '广东省',\r\n                value: 1,\r\n              },\r\n            ],\r\n            label: {\r\n              show: true,\r\n              position: 'inside',\r\n              formatter: '{b}',\r\n              offset: [0, 10],\r\n              textStyle: {\r\n                color: '#777',\r\n              },\r\n            },\r\n            type: 'bar',\r\n            barGap: 0,\r\n            barWidth: '33.33%',\r\n            itemStyle: {\r\n              normal: {\r\n                color: 'rgba(134,176,237, .5)',\r\n              },\r\n            },\r\n            xAxisIndex: 1,\r\n            yAxisIndex: 1,\r\n          },\r\n          {\r\n            data: [\r\n              {\r\n                name: '湖北省',\r\n                value: 1,\r\n              },\r\n            ],\r\n            label: {\r\n              show: true,\r\n              position: 'inside',\r\n              formatter: '{b}',\r\n              offset: [0, 10],\r\n              textStyle: {\r\n                color: '#777',\r\n              },\r\n            },\r\n            type: 'bar',\r\n            barGap: 0,\r\n            barWidth: '33.33%',\r\n            itemStyle: {\r\n              normal: {\r\n                color: 'rgba(40,191,126, .5)',\r\n              },\r\n            },\r\n            xAxisIndex: 1,\r\n            yAxisIndex: 1,\r\n          },\r\n          {\r\n            data: [\r\n              {\r\n                name: '浙江省',\r\n                value: 1,\r\n              },\r\n            ],\r\n            label: {\r\n              show: true,\r\n              position: 'inside',\r\n              formatter: '{b}',\r\n              offset: [0, 10],\r\n              textStyle: {\r\n                color: '#777',\r\n              },\r\n            },\r\n            type: 'bar',\r\n            barGap: 0,\r\n            barWidth: '33.33%',\r\n            itemStyle: {\r\n              normal: {\r\n                color: 'rgba(237,124,47, .5)',\r\n              },\r\n            },\r\n            xAxisIndex: 1,\r\n            yAxisIndex: 1,\r\n          },\r\n        ],\r\n      }\r\n      htChart.setOption(option)\r\n    },\r\n    handleClick() {\r\n      this.dialogVisible = true\r\n    },\r\n    handleClose() {\r\n      this.dialogVisible = false\r\n    },\r\n  },\r\n}\r\n",null]}