![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
echarts
柠檬不萌只是酸i
研究生在读 | 努力发论文 |
迈出第一步,才是新的开始。
展开
-
在vue项目中,完成饼图,并且饼图内外都展示文字
效果展示:分析:(1)如果不展示内部的 百分比 数字,那么这个饼图没什么难度。但是要是实现内外部同时展示文字,就需要思考下。(2)实现内外部同时展示:需要两份饼图,叠在一起(看下下面代码就很清楚了)。代码展示:<template> <div id="echartPie" style="width: 100%;height: 300px;"></div></template><script>let echarts原创 2020-11-11 17:15:35 · 1185 阅读 · 0 评论 -
vue项目中,使用echarts完成 折线+多柱状图 (附完整代码)
结果展示:分析:(1)在echarts里面的 series里面写三种柱状+一种折线图(2)该图谱也实现了自适应大小,缩小放大浏览器界面,柱状折线图也会随着变化,核心代码如下:setTimeout(function (){ // 随着页面自适应 window.onresize = function () { _this.eChart.resize(); }},200)代码展示:(附完整代码)<template> <div原创 2020-11-29 13:43:47 · 2874 阅读 · 0 评论 -
vue项目中,使用echarts完成 极坐标 + 小图谱(附完整代码)
效果图展示:思路描述:上面的图首先是由两部分完成的,底部是极坐标、上方是小图谱。具体里面的细节还是得仔细的看看文档代码展示:( 附完整代码 )【步骤一】:vue项目里面引入 echarts 。 npm install echarts --save【步骤二】:下方代码是上方图谱的组件,数据是暂时写死的,后期可以从接口获取。<template> <!-- 雷达图谱--> <div style="width:100%;height:100%;..原创 2020-11-11 16:45:00 · 1267 阅读 · 3 评论 -
v-if和v-show的真实的区别,来解决echarts图表tab切换
之前使用vue的时候,忽略了这个细节,知道今天在vue中使用图表的时候,才发现出问题了。问题描述:写的图表在页面上全部展示的时候可以显示,但是变成tab切换的时候,页面上的图表渲染不出来。先来说下v-if和v-show的区别:v-if : 当隐藏结构时,该结构会直接从整个DOM树中移除。v-show : 当隐藏结构时,是在该结构的style中加上display : none ...原创 2019-07-15 17:51:58 · 1571 阅读 · 0 评论 -
使用echarts完成饼图展示
效果图展示:代码展示:【代码直接可运行】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-07-05 11:13:43 · 496 阅读 · 0 评论 -
使用echarts实现地图展示
先来看下结果展示:下面来看下代码:【引入china.js 以下代码可直接运行】China.js文件的下载地址:https://github.com/liangrumeng2015/China.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-07-05 10:27:47 · 5150 阅读 · 0 评论 -
echarts实现中国地图踩过的坑--------有些省的value可以拿到,有些省的value拿不到
最近在使用echarts来写图表,踩过无数的坑,也崩溃过很多次,不过断断续续差不多一周多的时间里,也慢慢的进入了echarts的状态,坑,还是得多踩,踩着踩着,就没了。----------------------------------------------------进入主题这篇文章里https://blog.csdn.net/Miss_liangrm/article/details/...原创 2019-07-10 11:38:05 · 3039 阅读 · 0 评论 -
echarts的可视化组件,echarts显示右侧栏
在做地图的时候,难免会遇到使用可视化组件:如下图:对,右边红框里面的就是可视化组件,具体代码如下:China_map(id, arr_province_less,minValue,maxValue) { //初始化echarts实例 var myChart = echarts.init(document.getElementById(id)); myChart...原创 2019-07-12 19:52:46 · 1050 阅读 · 0 评论 -
使用echarts完成市级的图表
市级的文件的地址:https://github.com/liangrumeng2015/province_and_city效果图展示:思路:(1)需要拿到每个省份的市文件(可从上面的github上面下载)(2)读取JSON文件,读取市$.getJSON(" json文件所在的地址 ", "", function(data) {});代码展示:(引入json文件,代码...原创 2019-07-14 19:01:02 · 912 阅读 · 3 评论 -
vue中使用echarts出现报错: Cannot read property 'getAttribute' of null
控制台出现 “TypeError: Cannot read property 'getAttribute' of null” 报错。解决方法:(1)查看调用使用图表的id是否正确。(2)需要将echarts.js文件放在</body>之前就行,但是不要放在<head></head> 里面。(3)查看下页面文件加载的顺序是否正确。以上3...原创 2019-07-08 17:40:45 · 10690 阅读 · 2 评论