ECharts 集成

Apache ECharts 一个基于 JavaScript 的开源可视化图表库

ECharts 集成的运行效果，如下图所示

引用 echarts.js

从 ECharts 官网下载 echarts.js 文件，上传到 model/UI2/pcx 目录的任意目录下，如下图所示

在页面的 JS 文件中引用 echarts.js 文件，代码如下，注意路径

import * as echarts from '$UI/pcx/map/lib/echarts';

显示图表

VUE 案例

在页面的源码中添加 div，并设置 ref 属性，用于显示图表，代码如下

<div id="mapDiv" label="区块100" ref="{mapDiv}" style="height:100%"/>

在页面组件的“初次渲染完成”事件中写代码，显示图表

初次渲染完成事件的 JS 代码如下

import { reactive, ref, watch } from "vue";
import * as echarts from '$UI/pcx/map/lib/echarts';
import hunanData from '$UI/pcx/map/json/hunan.json';
let mapDiv = ref();

let onPageReady = (event) => {
    if (!mapDiv.value) { return; }
    let myChart = echarts.init(mapDiv.value);
    let result = hunanData;
    echarts.registerMap('mapDiv', result);
    let chartOption = {
        //此处代码省略
    }
    const dealWithData = (data) => {
        return data.features.map(item => {
            return {
                name: item.properties.name,
                // 随机数值
                value: Math.round(Math.random() * 25) + 1,
                centroid: item.properties.centroid,
                adcode: item.properties.adcode,
            }
        })
    }
    let dataValue = dealWithData(result);
    chartOption.series[0].data = dataValue;
    myChart.setOption(chartOption);

    // 缩放
    window.onresize = function () {
        myChart.resize();
    };

    // 点击事件
    myChart.on('click', function (params) {
        // 控制台打印数据的名称
        console.log(params);
    });
}

React 案例

在页面的源码中添加 div，并设置 ref 属性，用于显示图表，代码如下

<div id="mapDiv" label="区块100" ref="{$page.mapDiv}" style="height:100%"/>

在页面组件的“初次渲染完成”事件中写代码，显示图表

初次渲染完成事件的 JS 代码如下

import * as echarts from '$UI/pcx/map/lib/echarts';
import hunanData from '$UI/pcx/map/json/hunan.json';
import {createRef} from "react";

export default class IndexPage extends Page {
    constructor(props, context) {
        super(props, context);
        this.mapDiv = createRef();
    }

    onPageReady = (event) => {
        if (!this.mapDiv.current) { return; }
        let myChart = echarts.init(this.mapDiv.current);
        let result = hunanData;
        echarts.registerMap('mapDiv', result);
        let chartOption = {
            //此处代码省略
        }
        const dealWithData = (data) => {
            return data.features.map(item => {
                return {
                    name: item.properties.name,
                    // 随机数值
                    value: Math.round(Math.random() * 25) + 1,
                    centroid: item.properties.centroid,
                    adcode: item.properties.adcode,
                }
            })
        }
        let dataValue = dealWithData(result);
        chartOption.series[0].data = dataValue;
        myChart.setOption(chartOption);

        // 缩放
        window.onresize = function () {
            myChart.resize();
        };

        // 点击事件
        myChart.on('click', function (params) {
            // 控制台打印数据的名称
            console.log(params);
        });
    }
}

案例位置

桌面-地图类案例-echarts地图.w