一 直线图
三中国地图
javascript"><template><view class="content"><l-echart ref="chartRef"></l-echart></view>
</template><script setup>
import { ref, onMounted } from "vue";
import geoJson from "../../utils/china.json";
import LEchart from "@/components/l-echart/l-echart.vue";
const echarts = require("../../static/echarts.min.js");// 获取容器的dom元素
const chartRef = ref(null);
// echart图表的配置信息
const Options = ref({});onMounted(() => {addPie();
});// 加载饼图结构
const addPie = async () => {echarts.registerMap("中国", geoJson); // 注册中国地图const MyPie = await chartRef.value.init(echarts);Options.value = {geo: {map: "中国",show: true,// label:{// show:true,// fontWeight:600,// formatter:function(r) {// console.log(r.name)// if(r.name === '内蒙古自治区') {// return r.name.substr(0,3)// }// return r.name.substr(0,2)// }// },// regions:[{// name: '广东省',// selected:true// // itemStyle: {// // areaColor: 'red',// // color: 'red'// // }// },{// name: '香港特别行政区',// label:{// offset:[2,12]// }// },{// name: '澳门特别行政区',// label:{// offset:[-15,15]// }// }]},series: [{type: "map",map: "中国",label: {show: true,fontWeight: 600,formatter: function (r) {if (r.name === "内蒙古自治区") {return r.name.substr(0, 3);}return r.name.substr(0, 2);},},data: [{name: "广东省",selected: true,},],},],};MyPie.setOption(Options.value);
};
</script><style scoped>
.content {width: 100vw;height: 100vh;
}
</style>