echarts gl实例怎么用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts gl实例怎么用相关的知识，希望对你有一定的参考价值。
参考技术A 你把echarts.min.jsecharts-gl.min.js
这两个js文件从echarts官网下载下来，在同一个文件夹内新建一个html文件，把下面的代码复制进去。OK！
<!DOCTYPE html>
<html>
<head>
<title>echarts</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body
height: 100%;
width: 100%;
margin: 0;
padding: 0;
#main
height: 100%;
</style>
<script src="./echarts.min.js"></script>
<script src="./echarts-gl.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
var chart = echarts.init(document.getElementById('main'));
chart.setOption(
grid3D: ,
xAxis3D: ,
yAxis3D: ,
zAxis3D: ,
series: [
type: 'scatter3D',
symbolSize: 50,
data: [[-1, -1, -1], [0, 0, 0], [1, 1, 1]],
itemStyle:
opacity: 1
]
)
</script>
</body>
</html> 参考技术B 新建txt文本 修改文本名为demo1.html(注意：要修改文件名) 将例子的代码拷贝到demo1中 使用浏览器打开
用vue实现echarts条形图官方实例
<style scoped>
#chart_example{
width: 50%;
height: 500px;
}
</style>
<template>
<div >
<h2>vue中插入Echarts示例</h2>
<div id="chart_example">
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
//import world from '../node_modules/echarts/map/js/world.js'
// import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
export default {
data() {
return {}
},
mounted() {
let myChart = echarts.init(document.getElementById('chart_example'));
let option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
myChart.setOption(option)
window.addEventListener('resize',function() {myChart.resize()});
},
methods: {},
watch: {},
created() {
}
}
</script>
官方实例很难用，有时候行，有时候不行，不知道为什么
以上是关于echarts gl实例怎么用的主要内容，如果未能解决你的问题，请参考以下文章
echarts-gl.js(1.0.0-beta)和echarts.js(3.8.4)
Vue项目中使用Echarts中 ECharts GL 实现基础的三维可视化
在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echartsecharts-gljQuery依赖，已踩坑）
资讯 | 前端工具新特性；Koa 请求日志打点工具；用 ECharts GL 实现三维可视化；从手势交互分析产品设计背后的原理