uniapp使用echart

一 直线图

三中国地图

<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>