引用 Echarts

优质

小牛编辑

136浏览

2023-12-01

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。这个章节引导使用者制作一个 3D 场景和图表结合的混合场景，制作完成的场景中不仅有 3D 场景，还可以通过悬浮在 3D 上方的 2D 面板和图表来表达 3D 场景中某个物体的运行参数，状态等，制作完成的案例图如下图：

点击此处查看示例

引用步骤

加载 echarts.js
创建需要的 DOM 节点
初始化 Echarts
配置图表的属性
将节点放到 app dom 下

加载 echarts.js

加载 echarts.js 的目的是为了引用 Echarts 图表库中的图表。

通过 Loader.sync 方法加载 js ，方法的执行需要两个参数：

① 第一个参数为 echarts.js 的 URL (链接地址)；

② 第二个参数为加载 echarts.js 之后调用的回调方法。

JS 代码如下：

THING.Utils.dynamicLoad(['https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js'],function() {})

创建需要的 DOM 节点

DOM 节点为需要在场景中显示的节点

通过 document.createElement 创建新的 DOM 节点

由于 DEMO 的需求，此处创建 3 个 DOM 节点，这三个 DOM 节点分别是：

① 背景颜色 div；

② 标题 div；

③ 底部图表 div；；

JS 代码如下：

//背景颜色
var bottomBackground = document.createElement('div');
//标题
var bottomFont = document.createElement('div');
//图表
var bottomDom = document.createElement('div');
//背景样式右下角对齐
var backgroundStyle = 'bottom:0px; position: absolute;right:0px;height:400px;width:600px;background: rgba(41,57,75,0.74);';
//字体样式
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

加载 echarts.js 完成以后，已经将 Echarts 引入到场景中了。通过以下两步可以得到图表实例：

① 调用 window.echarts 获取 Echarts 。

② 通过 init 方法创建图表实例，传入的参数为需要 Echarts 图表的 DOM 节点，返回的是图表实例。

具体初始化方法可以参照 Echarts 官网五分钟上手 Echarts。

JS 代码如下：

let topCharts = window.echarts.init(topDom)
let bottomCharts = window.echarts.init(bottomDom)

配置图表的属性

图表的各项属性 options 代表的含义可以点击 Echarts 官网配置项手册。

最好在 Echarts 官网或者 ChartBuilder 官网上，将图表的 options 配置完毕，这样可以快速查看配置的效果。
调用 setOptions 方法将配置好的 options 传入图表。

JS 代码如下：

let shishiOptions = {
    "yAxis": {
"axisLabel": {
"textStyle": {
    "color": "#fff"
}
},
"type": "value",
"splitLine": {
"lineStyle": {
    "type": "dotted"
}
},
"axisLine": {
"lineStyle": {
    "color": "rgba(167,167,167,1)"
}
}
    },
    "xAxis": {
"axisLabel": {
"textStyle": {
    "color": "#fff"
}
},
"type": "category",
"boundaryGap": false,
"axisLine": {
"lineStyle": {
    "color": "rgba(167,167,167,1)"
}
},
"data": [
"1722",
"1723",
"1724",
"1725",
"1726",
"1727",
"1728",
"1729",
"1730",
"1731",
"1732",
"1733",
"1734",
"1735",
"1736",
"1737",
"1738",
"1739",
"1740",
"1741",
"1742",
"1743",
"1744",
"1745",
"1746",
"1747",
"1748",
"1749",
"1750",
"1751",
"1752",
"1753",
"1754",
"1755",
"1756",
"1757",
"1758",
"1759",
"1760",
"1761",
"1762",
"1763",
"1764",
"1765",
"1766",
]
    },
    "series": [
{
"data": [
    24.3,
    25.2,
    25.4,
    24.7,
    23.5,
    24.1,
    25.6,
    27.4,
    26.9,
    27.1,
    27.9,
    27.9,
    27.5,
    26.7,
    27.7,
    27.7,
    27.4,
    27,
    27.1,
    25.8,
    25.9,
    27.4,
    28.2,
    28.5,
    29.4,
    28.1,
    20.9,
    20.4,
    20.9,
    22.4,
    22.1,
    29.5,
    27.5,
    27.1,
    27.5,
    28.1,
    26.8,
    23.4,
    22.1,
    21.9,
    22.8,
    22.9,
    21.3,
    24.4,
    24.2,
    23,
    23,
],
"type": "line",
"name": "value",
"animation": false
}
    ],
    "legend": {
"data": [
"value"
],
"textStyle": {
"color": "#fff"
}
    },
    "color": [
"#F45B5B",
"#001852",
"#f5e8c8",
"#b8d2c7",
"#c6b38e",
"#a4d8c2",
"#f3d999",
"#d3758f",
"#dcc392",
"#2e4783",
"#82b6e9"
    ]
}
    let jiangshuiOptions = {
    "tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross",
"crossStyle": {
    "color": "#999"
}
}
    },
    "legend": {
"textStyle": {
"color": "auto"
},
"data": [
"蒸发量",
"降水量",
"平均温度"
]
    },
    "xAxis": [
{
"axisLabel": {
    "textStyle": {
"color": "#fff"
    }
},
"type": "category",
"data": [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月"
],
"axisPointer": {
    "type": "shadow"
}
}
    ],
    "yAxis": [
{
"type": "value",
"name": "水量",
"min": 0,
"max": 250,
"interval": 50,
"splitLine": {
    "lineStyle": {
"type": "dotted"
    },
    "show": true
},
"nameTextStyle": {
    "color": "#fff"
},
"axisLabel": {
    "textStyle": {
"color": "#fff"
    },
    "formatter": "{value} ml"
}
},
{
"splitLine": {
    "lineStyle": {
"type": "dotted"
    },
    "show": true
},
"type": "value",
"name": "温度",
"min": 0,
"max": 25,
"interval": 5,
"nameTextStyle": {
    "color": "#fff"
},
"axisLabel": {
    "textStyle": {
"color": "#fff"
    },
    "formatter": "{value} °C"
}
}
    ],
    "series": [
{
"name": "蒸发量",
"type": "bar",
"data": [
    2,
    4.9,
    7,
    23.2,
    25.6,
    76.7,
    135.6,
    162.2,
    32.6,
    20,
    6.4,
    3.3
]
},
{
"name": "降水量",
"type": "bar",
"data": [
    2.6,
    5.9,
    9,
    26.4,
    28.7,
    70.7,
    175.6,
    182.2,
    48.7,
    18.8,
    6,
    2.3
]
},
{
"name": "平均温度",
"type": "line",
"yAxisIndex": 1,
"data": [
    2,
    2.2,
    3.3,
    4.5,
    6.3,
    10.2,
    20.3,
    23.4,
    23,
    16.5,
    12,
    6.2
]
}
    ],
    "color": [
"#2b908f",
"#90ee7e",
"#f45b5b",
"#7798BF",
"#aaeeee",
"#ff0066",
"#eeaaee",
"#55BF3B",
"#DF5353",
"#7798BF",
"#aaeeee"
    ]
}
    topCharts.setOption(shishiOptions)
    bottomCharts.setOption(jiangshuiOptions)

将节点放到 app dom 下

JS 代码如下：

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