echarts
关注
分享
扫一扫
文章平均质量分 51
echarts
爱学习的小兰同学
学习总结记录（公众号：元气满满的大咸鱼。欢迎关注。）
展开
-
echarts关系图demo
实现效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2022-03-26 22:54:03 · 1870 阅读 · 0 评论 -
地图相关（二）---绘制中国地图
PS相关学习资料链接：Pink老师的教程分解效果：（背景动画的实现前面已经总结过，这里只看如何绘制地图）步骤一：下载china.js提供中国地图的js文件链接：https://pan.baidu.com/s/1WmT6ALnL4WXgei6xvifQxw提取码：3cdw步骤二：1 html中网页结构及地图js引入：<div class="map"> <div class="chart"> <!-- 这里就是图形绘制的地方 -->.原创 2021-07-16 16:57:21 · 956 阅读 · 0 评论 -
echarts之饼图（2）---玫瑰饼图
PS相关学习资料链接：Pink老师的教程分解效果：1.html结构<div class="pannel rose"> <h2>玫瑰饼图</h2> <div class="chart"> </div></div>2.css自行设置chart位置的宽和高3.js逻辑：//玫瑰饼图(function() { var myChart = echarts.init(document.原创 2021-07-16 16:43:02 · 1468 阅读 · 0 评论 -
echarts之饼图---圆环饼图（1）
PS相关学习资料链接：Pink老师的教程分解效果：1.html结构<div class="pannel age"> <h2>圆环饼图</h2> <div class="chart"> 图表 </div></div>2.css自行设置chart位置的宽和高3.js逻辑：//饼图：年龄分布(function() { var myChart = echarts.init(docu.原创 2021-07-16 16:09:34 · 538 阅读 · 0 评论 -
echarts之折线图（2）
PS相关学习资料链接：Pink老师的教程分解，O(∩_∩)O哈哈~效果：html结构:<div class="pannel trend"> <h2>复杂趋势图</h2> <div class="chart"> </div></div>css自行设置chart类的宽和高。js相关逻辑：//折线图2：复杂趋势图(function() { //1找到chart var myCh.原创 2021-07-12 21:31:47 · 343 阅读 · 0 评论 -
echarts之折线图（1）
效果：html结构<div class="pannel count"> <h2>游客与粉丝数量趋势图 <a href="javascript:;">2019</a> <a href="javascript:;">2020</a> </h2> <div class="chart"> </div></div>css自原创 2021-07-12 18:28:33 · 181 阅读 · 0 评论 -
echarts之柱状图（2）
PS相关学习资料链接：Pink老师的教程分解，O(∩_∩)O哈哈~自行设置css和html结构，这里主要是js：(function() { //找到画图的区域 var myChart = echarts.init(document.querySelector(".horization .chart")); //第一类柱子的颜色 var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];.原创 2021-07-12 17:36:29 · 282 阅读 · 0 评论 -
echarts的基础配置
主要配置：series xAxis yAxis grid tooltip title legend colorseries系列列表。每个系列通过 type 决定自己的图表类型xAxis直角坐标系 grid 中的 x 轴boundaryGap： 是否让线条（或柱子）和坐标轴有缝隙yAxis直角坐标系 grid 中的 y 轴grid直角坐标系内绘图网格title标题组件tooltip提示框组件legend图例组件color调色盘颜色列表 ( 柱状图中柱子颜色或折线图中线条.原创 2021-07-04 11:32:19 · 636 阅读 · 0 评论 -
echarts之柱状图（1）
PS相关学习资料链接：Pink老师的教程分解，O(∩_∩)O哈哈~<div class="bar"> <h2>就业行业 <a href="javascript:;">2019</a> <a href="javascript:;">2020</a> </h2> <div class="chart"> </div></div&.原创 2021-07-02 22:29:56 · 415 阅读 · 3 评论 -
地图相关（一）
PS相关学习资料链接：Pink老师的教程，O(∩_∩)O哈哈~图片来源：https://pan.baidu.com/s/1DGRic_SQ9X0Oqbaty_nwfg ，提取码：kowl总的实现效果：分解：a. 一个蓝色的圆球b. 与蓝色圆球大小差不多的浅蓝色线，逆时针旋转c. 网格顺时针旋转d. 地图（本节先不实现地图）背景图a图：b图：c图：HTML：<div class="map"> <div class="map1"><.原创 2021-06-28 21:02:02 · 245 阅读 · 0 评论