web端--数据展示--echarts篇--走马观花

最新推荐文章于 2023-06-28 23:19:14 发布

dreamer_sen

最新推荐文章于 2023-06-28 23:19:14 发布

阅读量429

点赞数

分类专栏： web端数据展示文章标签： echarts web前端数据展示 js

本文链接：https://blog.csdn.net/dreamer_sen/article/details/86569526

版权

web端数据展示专栏收录该内容

3 篇文章 0 订阅

订阅专栏

走马观花—大致过一遍

昨天把慕课网的视频看完，大概就是走马观花，没有很细致的去说明，这样的好处就是可以大概知道：echarts能做什么样的图表？

echarts能做什么样的图表？

在官网有所有的图表实例
具体包括：条形图（line）,柱状图（bar），饼图（pie），散点图（Scatter），地图（map），地理坐标系（GEO），k线图（Candlestick），雷达图（Radar），盒须图（Boxplot），热力图（Heatmap），3D图表等

怎么做echarts图表

官网有5分钟入门教程
以柱状图为例，具体步骤：

创建一个html文件:bar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>柱状图</title>
</head>
<body>
    
</body>
</html>

引入文件：echarts.min.js 下载地址
```
<script src="echarts.min.js"></script>
```

添加dom容器

<div id="main" style="width: 600px;height:400px;"></div>

创建echarts实例

<script type="text/javascript">
   // 初始化
   echarts.init(document.getElementById('main')).setOption({
       // 表名
       title: {
           text: 'bar Chart'
       },
       // 鼠标提示
       tooltip: {},
       // x轴配置项  类型：分类 数据：星期一到星期天
       xAxis: {
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       // y轴配置项，类型为值
       yAxis: {
           type: 'value'
       },
       // 配置图表类型与图表数据
       series: [{  
           type: 'bar',
           data: [12, 24, 36, 48, 60, 72, 90]
       }]
   });
</script>

5.demo地址

总结

其实主要掌握的是option 即配置项，官网有一个手册：配置项手册
接下来直接做实例了，具体了解其他表格去官网看，已经是十分详细了

dreamer_sen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web端--数据展示--echarts篇--走马观花

走马观花—大致过一遍昨天把慕课网的视频看完，大概就是走马观花，没有很细致的去说明，这样的好处就是可以大概知道：echarts能做什么样的图表？echarts能做什么样的图表？在官网有所有的图表实例具体包括：条形图（line）,柱状图（bar），饼图（pie），散点图（Scatter），地图（map），地理坐标系（GEO），k线图（Candlestick），雷达图（Radar），盒须图（Bo...
复制链接

扫一扫