1.基础用法(画像app)

<template>
    <china-map-chart ref="chartRef" v-bind="chartOption"></china-map-chart>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();

const chartOption = {
    range: [0, 200],
    seriesData: [
        { name: '黑龙江省', 'value': 1 },
        { name: '浙江省', 'value': 44 },
        { name: '四川省', 'value': 40 },
        { name: '江苏省', 'value': 8 },
        { name: '安徽省', 'value': 93 },
        { name: '海南省', 'value': 140 },
        { name: '河南省', 'value': 178 }
    ]
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    // width: 375px;
    // height: 300px;
    width: 750px;
    height: 600px;
    background-color: white;
}
</style>

属性

属性名

说明

类型

默认值

参考值

range

值区间

Array

[0, 100]

[100, 200]

rangeColor

区间颜色

Array

['#0055FF', '#65F1B6', '#FFD655', '#FF9512']

['red', 'green', 'blue']

seriesData

数据数组

Array

[]

[
    { name:'黑龙江省', value: 50 },
    { name:'浙江省', value: 15 },
    { name:'四川省', value: 75 },
    { name:'江苏省', value: 100 },
    { name:'安徽省', value: 0 }
]

centerLngLat

中心位置的经纬度

Array

([104, 35])

[104, 35]

zoom

当前视角的缩放比例

Number

1.5

1.4

scale

图表缩放比例

Number

1

2

beforeSetOption

万能方法，图表渲染之前执行

Function

null

function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}

afterSetOption

万能方法，图表渲染之后执行

Function

null

function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}