如何使用Echarts图表结合三维可视化场景???

远方小镇 3月前 394

      如何使用Echarts图表结合三维可视化场景?达到后台的数据传递到图表中去?

最新回复 (2)
  • zzzzzker 3月前
    0 引用 2


    这个的话,需要先明白怎么使用Echarts图表,很简单,将Echarts中的实例中的数据复制下来,在ThingJS打开一个官方示例:整合Echarts;将echartOptions的值替换为Echarts实例中的数据,点击保存,同时点开官方示例“数据”中的“数据对接_Ajax”,切换url,复制对应的数据对接方法,同时注意使用Echarts图表的方法:

    // echarts 初始化
    var bottomCharts = window.echarts.init(bottomDom);
    //动态修改后需要重新初始化
    var mychart = window.echarts.init(document.getElementById('myId'));
    mychart.setOption(option);



    将ajax获取到的数据替换掉option数据中的 ‘servers[0].data’中的数据即可。

    完整代码如下:


    //设置全局变量
    var count = 0;
    // 动态引入ECharts.js
    THING.Utils.dynamicLoad(['https://www.thingjs.com/guide/lib/echarts.min.js'], function () {
    /*
       *var app = new THING.App()一直作为ThingJS的启动来使用的,其中有url等信息需要填写
       *url则是制作好的场景上传到ThingJS网站后的链接
       */

    var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse',     // 场景地址
    "skyBox": "BlueSky"
    });

    /**
       data : humi : "54%"  id :"1606" power  :"8kWh"  temper :"16℃"
       */
    app.on('load', function () {

    createChart();
    var car = app.query('.Thing');
    updateData(car[0]);

    })

    /**
        * 创建图表
        */
    function createChart() {
    // 背景 div
    var bottomBackground = document.createElement('div');
    bottomBackground.id = 'myId';
    // 标题 div
    var bottomFont = document.createElement('div');
    // 图表 div
    var bottomDom = document.createElement('div');
    // 设置背景样式、右下角对齐
    var backgroundStyle = 'bottom:0px; position: absolute;right:0px;height:400px;width:600px;background: rgbargba(40, 119, 98, 0.39);';
    // 标题字体样式
    var fontStyle = 'position: absolute;top:0px;right:0px;color:rgba(113,252,244,1);height:78px;width:600px;line-height: 45px;text-align: center;top: 20px;';
    // 图表DIV样式
    var chartsStyle = 'position: absolute;top:80px;right:0px;width:600px;height:300px;';

    // 设置样式
    bottomBackground.setAttribute('style', backgroundStyle);
    bottomFont.setAttribute('style', fontStyle);
    bottomDom.setAttribute('style', chartsStyle);

    // 底部标题文字
    bottomFont.innerHTML = '车位温度监控';
    // echarts 初始化
    var bottomCharts = window.echarts.init(bottomDom);
    // 数据部分

    option = {
    title: {
    text: '气候表'
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
    type: 'cross',
    label: {
    backgroundColor: '#6a7985'
    }
    }
    },
    legend: {
    data: ['温度', '湿度']
    },
    toolbox: {
    feature: {
    saveAsImage: {}
    }
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis: [
    {
    type: 'category',
    boundaryGap: false,
    data: ['6', '7', '8']
    }
    ],
    yAxis: [
    {
    type: 'value'
    }
    ],
    series: [
    {
    name: '温度',
    type: 'line',
    stack: '总量',
    areaStyle: {},
    data: [12, 32, 10]
    },
    {
    name: '湿度',
    type: 'line',
    stack: '总量',
    areaStyle: {},
    data: [44, 21, 18]
    }
    ]
    };




    bottomCharts.setOption(option);

    bottomBackground.appendChild(bottomFont);
    bottomBackground.appendChild(bottomDom);

    // 添加到app dom下
    app.domElement.appendChild(bottomBackground);
    }
    })


    /**
    * 使用ajax更新数据
    */
    function updateData(obj) {
    // 如果网站是 https 接口则对应 https 请求
    // 如果网站是 http 接口则对应 http 请求即可
    $.ajax({
    type: "get",
    url: "https://3dmmd.cn/getMonitorDataById",
    data: { "id": obj.id },
    dataType: "json", // 返回的数据类型 json
    success: function (d) {
    console.log('第一次:' + option.xAxis[0].data.length);
    changeHumidity(d);
    changeTemperature(d);
    addSubscript(d);
    changeEcharts();
    // 每隔4s 请求一次数据
    var timer = setTimeout(function () {
    //当时间数组下标
    if (option.xAxis[0].data[option.xAxis[0].data.length - 1] == 24) {
    clearTimeout(timer);
    return;
    }
    updateData(obj);
    }, 4000)

    }

    });


    /**
        * 获取到温度变化值并且传入到echarts图表中去,同时修改图表展示。
        */
    function changeTemperature(d) {
    //获取到返回的字符串中的temper
    var temper = d.data.temper;
    //使用分割字符串方法获取到温度的数字
    var newtemper = temper.substr(0, temper.indexOf("℃"))
    //新建一个数组,给option数据中对应的数组添加变化后的温度
    var array = [];
    array = option.series[0].data;
    array.push(parseInt(newtemper));
    option.series[0].data = array;

    }

    /**
        * 获取到湿度变化值并且传入到echarts中去,同时修改图表展示
        */
    function changeHumidity(d) {
    //获取到返回的字符串中的temper
    var humi = d.data.humi;
    //使用分割字符串方法获取到温度的数字
    var newHumi = humi.substr(0, humi.indexOf("%"))
    //新建一个数组,给option数据中对应的数组添加变化后的温度
    var array = [];
    array = option.series[1].data;
    array.push(parseInt(newHumi));
    option.series[1].data = array;
    //初始化

    }

    /**
        * 添加图表下标
        */
    function addSubscript(d) {
    var timerTemp = [];
    timerTemp = option.xAxis[0].data;
    timerTemp.push(8 + ++count);
    //横坐标递增
    option.xAxis[0].data = timerTemp
    }

    function changeEcharts() {
    //初始化
    var mychart = window.echarts.init(document.getElementById('myId'));
    mychart.setOption(option);
    }
    }




  • 远方小镇 3月前
    0 引用 3
    好的谢谢

你可以在 登录 or 注册 后,对此帖发表评论!

返回