Echarts实例,在线引入echarts

下载地址 https://echarts.apache.org/zh/download.html
在这里插入图片描述
保存页面与html存于一个文件夹

引入在线版本echarts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个实例</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
    </script>
</head>

第一个实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个实例</title>
    //引入在线版本Echarts
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
    </script>
</head>
<body>
//背景
<div id="main" style="width: 400px;height: 400px;border: aqua 3px solid"></div>
//写Javascript语言
<script type="text/javascript">
    //初始化Echarts实例
    var myEcharts=echarts.init(document.getElementById('main'))
    //定义变量
    var option={
        //图例
        title:{text:'第一个手写的电子图'},
        //图例组件
        legend:{data:['销量'],textStyle:{color:'blue'}},
        xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},
        yAxis: {},
        series: [{
        name: '销量',
        //柱状图
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]}]
    };
    //设置配置
        myEcharts.setOption(option);


</script>
</body>
</html>
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 要在 echarts引入地球,可以借助 echarts-gl 插件,该插件专门用于地理数据可视化。以下是引入地球的步骤: 1. 确保已经引入 echartsecharts-gl 库文件,并在 HTML 页面中创建一个容器元素,用于显示地球图表。 2. 在 JavaScript 中,先创建一个 echarts 实例,并将容器元素传递给实例的构造函数。例如: ``` var myChart = echarts.init(document.getElementById('chart-container')); ``` 3. 在使用地球图表时,首先需要引入相关的地理数据文件,以及地球的纹理图片资源。可以通过 Echarts 官网下载这些文件,然后将其放置在合适的目录下。 4. 在 JavaScript 中,设置地球图表的基本配置项,包括图表类型、坐标系类型等。例如: ``` var option = { globe: { baseTexture: 'path/to/baseTexture.jpg', heightTexture: 'path/to/heightTexture.jpg', environment: 'path/to/environment.jpg', // 其他地球配置项 }, // 其他图表配置项 }; ``` 5. 按需设置和配置地球图表的其他项,例如数据系列、标记点、光照效果等。 6. 最后,使用 `setOption` 方法将配置项应用到地球图表上: ``` myChart.setOption(option); ``` 通过以上步骤,就能够在 echarts 中成功引入地球图表,并对其进行各种配置和定制化操作。可以根据具体需求,灵活调整图表样式和功能,实现所需的地球数据可视化效果。 ### 回答2: 要在echarts引入地球,需要使用echarts中的地理坐标系(geo)组件和地图数据。 首先,需要在html文件的头部引入echarts的js文件: ``` <script src="echarts.js"></script> ``` 接下来,在js代码中,创建一个echarts实例,并设置容器的宽度和高度: ``` var myChart = echarts.init(document.getElementById('container')); myChart.setOption({ width: '100%', height: '100%' }); ``` 然后,引入地图数据。echarts提供了一些默认的地图数据,但对于地球,需要额外引入。可以在echarts的官方网站上下载相关的地图数据,格式为json或js格式。 下载好地图数据后,需要引入这些数据: ``` // 引入地图数据 echarts.registerMap('world', worldData); // 'world'为自定义的地图名称,worldData为地图数据 ``` 在echarts的option中,配置地理坐标系和地图数据: ``` option = { geo: { map: 'world', // 地图名称,与上方引入的地图数据的名称一致 roam: true, // 是否开启鼠标缩放和平移漫游 itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' // 地图区域边框颜色 }, emphasis: { areaColor: '#2a333d' // 鼠标移上去后的区域颜色 } } }, series: [] }; myChart.setOption(option); ``` 最后,可以根据需要添加其他的series(系列)进行数据展示。例如,可以添加一个散点图(scatter)来标记地球上的某些点。 以上就是在echarts引入地球的基本步骤。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值