web/src/components/chart/MapChart.vue

<template>
  <ve-map
    :height="options.height"
    :after-config="options.config"
    :data="datas"
    :settings="defaultSettings"
    :extend="defaultOptions">
</ve-map>
</template>
<script>
const mapJson = require('../../assets/js/china.json')
console.log(mapJson)
export default {
  name: 'chart',
  props: {
    id: String,
    datas: Object,
    options: {
      height: String,
      colors: Array || Object,
      settings: Object,
      config: Function
    }
  },
  data () {
    return {
      initRendererSvg: {
        renderer: 'svg'
      },
      defaultSettings: {
        // positionJsonLink: '/page_big_pc/assets/js/china.json',
        mapOrigin: mapJson,
        label: {
          show: true,
          fontSize: 12
        },
        selectedMode: false, // 去掉省份小圆点
        itemStyle: {
          normal: {
            borderColor: '#F06326',
            areaColor: '#FFFFFF'
          }
        },
        mapGrid: {
          left: 82,
          right: 82
        }
      },
      defaultOptions: {
        tooltip: {
          confine: true,
          backgroundColor: '#fff',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(5,166,243,0.1)'
            },
            z: 3
          },
          textStyle: {
            color: '#171826',
            fontSize: 12
          },
          padding: [8, 12],
          extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
          formatter: (params, ticket, callback) => {
            if (params.data === null) {
              return params.name + '：0'
            } else {
              return params.name + '：' + params.value
            }
          }
        },
        grid: {
          left: 32,
          right: 16,
          containLabel: true
        },
        legend: {
          selectedMode: false,
          textStyle: {
            color: 'transparent'
          },
          itemWidth: 0,
          itemHeight: 0
        },
        silent: false, // 禁用鼠标点击、滑过事件
        series: {
          showLegendSymbol: false,
          selectedMode: false
        },
        graphic: [
          {
            type: 'group',
            bottom: 42,
            children: [
              {
                type: 'text',
                z: 100,
                left: 'left',
                top: 'middle',
                style: {
                  fill: '#333',
                  text: '市场分布数量',
                  font: '12px Microsoft YaHei'
                }
              }]
          },
          {
            type: 'rect',
            z: 101,
            left: 0,
            bottom: 16,
            shape: {
              width: 150,
              height: 24
            },
            style: {
              stroke: '#FB483D',
              fill: 'transparent',
              lineWidth: 0.5
            }
          },
          this.rectGroup(0, '#F06326'),
          this.rectGroup(25, '#F48A5D'),
          this.rectGroup(50, '#FFB366'),
          this.rectGroup(75, '#FFCF9F'),
          this.rectGroup(100, '#FFE7CF'),
          this.rectGroup(125, '#FFF4EB'),
          {
            type: 'group',
            width: 150,
            bottom: 0,
            left: 0,
            children: [{
              type: 'text',
              z: 100,
              left: 'left',
              top: 'middle',
              style: {
                fill: '#333',
                font: '12px Microsoft YaHei'
              }
            },
            {
              type: 'text',
              z: 100,
              left: 'right',
              top: 'middle',
              style: {
                fill: '#333',
                text: '0',
                font: '12px Microsoft YaHei'
              }
            }]
          }
        ],
        visualMap: {
          show: false,
          inRange: {
            color: ['#FFF4EB', '#FFE7CF', '#FFCF9F', '#FFB366', '#F48A5D', '#F06326']
          },
          outOfRange: {
            color: ['#F06326']
          }
        }
      }
    }
  },
  computed: {},
  watch: {},
  mounted () {},
  methods: {
    extend (chart) {
      chart.setOption({
        series: [{
          type: 'bar',
          barWidth: 20
        }, {
          type: 'line',
          smooth: false,
          symbol: 'none'
        }]
      })
    },
    rectGroup (left, color) {
      return {
        type: 'rect',
        z: 90,
        left: left,
        bottom: 16,
        shape: {
          width: 25,
          height: 24
        },
        style: {
          fill: color
        }
      }
    }
  },
  beforeDestroy () {}
}
</script>
<style lang="scss" scoped>
</style>