var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; myChart.showLoading(); $.getJSON('./1234.json', function (graph) { myChart.hideLoading(); graph.nodes.forEach(function (node) { node.label = { show: node.symbolSize > 15 }; }); option = { title: { text: '技能图谱', subtext: 'Circular layout', top: 'bottom', left: 'right' }, tooltip: {}, legend: [ { data: graph.categories.map(function (a) { return a.name; }) } ], animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [ { type: 'graph', layout: 'circular', circular: { rotateLabel: true }, data: graph.nodes, links: graph.links, categories: graph.categories, roam: true, label: { position: 'right', formatter: '{b}' }, lineStyle: { color: 'source', curveness: 0.3 } } ] };
时间: 2023-06-24 09:08:18 浏览: 169
这是一个使用 ECharts 绘制技能图谱的 JavaScript 代码。首先通过 `document.getElementById('main')` 获取页面中的 `id` 为 `main` 的元素,然后使用 `echarts.init(chartDom)` 初始化 ECharts 实例。接着定义了一个变量 `option` 用于存储绘图配置信息。在数据加载过程中使用 `myChart.showLoading()` 显示加载动画,然后通过 `$.getJSON('./1234.json', function (graph) {...})` 异步获取技能图谱数据。在数据加载完成后使用 `myChart.hideLoading()` 隐藏加载动画。对于节点的标签显示,如果节点的 `symbolSize` 大于 15,则显示标签,否则不显示。在绘图配置中定义了标题、提示框、图例等信息,并以“circular”方式布局节点,设置节点的旋转标签、漫游等属性。最后将绘图配置信息赋值给 `option` 变量,并将其传递给 `myChart.setOption(option)` 方法实现技能图谱的绘制。
相关问题
echarts showLoading怎么使用
要使用`showLoading`函数,首先需要获取到ECharts实例,然后调用该函数即可。以下是一个简单的例子:
```html
<div id="chart" style="height: 400px;"></div>
```
```javascript
// 初始化ECharts实例
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
// 显示加载动画
myChart.showLoading();
// 加载数据
$.get('data.json', function (data) {
myChart.hideLoading();
// 使用加载数据后的Option配置图表
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
data: data.data
}]
});
});
```
在上面的例子中,我们先获取到了一个DOM元素,然后使用`echarts.init`函数初始化ECharts实例,并调用`showLoading`函数显示加载动画。接着,我们使用jQuery的`$.get`函数异步加载数据,并在加载完成后使用`hideLoading`函数隐藏加载动画,同时使用`setOption`函数设置图表的数据和配置。
通过echarts根据hangzhou-tracks.json绘制地图
首先,需要下载并引入echarts库,可以在官网下载或者通过CDN引入。然后,需要准备好数据文件hangzhou-tracks.json,该文件包含杭州市的地理信息。最后,可以根据数据文件使用echarts绘制地图。
以下是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts - Hangzhou Map</title>
<!-- 引入echarts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个画布 -->
<div id="map" style="width: 800px;height: 600px;"></div>
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('map'));
// 加载数据
myChart.showLoading();
$.getJSON('hangzhou-tracks.json', function (data) {
myChart.hideLoading();
// 绘制地图
echarts.registerMap('hangzhou', data);
myChart.setOption({
series: [{
type: 'map',
map: 'hangzhou'
}]
});
});
</script>
</body>
</html>
```
其中,`echarts.init`用来初始化一个echarts实例,`echarts.registerMap`用来注册地图数据,`myChart.setOption`用来设置地图的参数。具体的参数可以在echarts官网上查看文档。
阅读全文