随笔分类 - echarts
摘要：
简单的饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EC
阅读全文
简单的饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EC
阅读全文
摘要：场景 周五进行需求评审的时候； 出现了一个图表，本身一个图表本没有什么稀奇的； 可是产品经理在图表的上的备注,让我觉得这个事情并不简单； 那个图表的时间跨度可以是月,年，而且时间间隔很短； 这让我意识到事情并不是想的那样简单； 然后经过简单的询问：如果选择的范围是年；数据可能会上万； 我们都知道；出
阅读全文
摘要：echarts图表X轴 在柱状图中，X轴类目名如果数据太长； echarts会默认进行隐藏部分字段； 如果我们想让每一个类目名都显示出来，需要进行额外的处理 X轴类目名太长时,默认只显示一部分类目名 <!DOCTYPE html> <html lang="en"> <head> <meta char
阅读全文
摘要：
简单的多条折线图 小伙伴写过多条折线图的都知道， 常见的折线图是 xAxis 配置项下的 data属性上设置时间或者日期。 series配置项下是对应的 legend中的数据以及该条折线的数据。 <!DOCTYPE html> <html lang="en"> <head> <meta charse
阅读全文
简单的多条折线图 小伙伴写过多条折线图的都知道， 常见的折线图是 xAxis 配置项下的 data属性上设置时间或者日期。 series配置项下是对应的 legend中的数据以及该条折线的数据。 <!DOCTYPE html> <html lang="en"> <head> <meta charse
阅读全文
摘要：<template> <div class="managingPatientSize"> <div id="china-map"></div> </div> </template> <script> import geoJson from 'echarts/map/json/china.json'
阅读全文
摘要：为什么要去封装echarts？ 在我们的项目中，有很多的地方都使用了echarts图表展示数据。 在有些场景，一个页面有十多个的echarts图。 这些echarts只是展示的指标不一样。 如果我们每一个echarts图都写一份配置型的话， 会有非常多的冗余代码，并且如果需要某一个配置项。 我们需要
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echa
阅读全文
摘要：echarts 可以设置的echarts单位的偏移位置吗？ 之前是知道echarts的X和Y是可以设置单位的。 但是设置单位的位置一直不好调整。 现在有时间，我们会回答一下上面标题的问题？ echarts 可以设置X和Y轴单位的偏移位置吗？答案是可以的。 通过 nameTextStyle 这个属性来
阅读全文
摘要：参考的地址：https://echarts.apache.org/zh/api.html echarts.init echarts.init(dom?: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: { deviceP
阅读全文
摘要：场景描述 我们在项目中，很多时候都会使用echarts进行数据展示。 当没有数据的时候，echarts的展示就会特别的难看。 这个时候我们就会优化界面的显示，在echarts中展示暂无数据。 有很多中方法： 1.只设置echarts中的title选项，其他选择都不进行设置 2.在页面中使用v-sho
阅读全文
摘要：echarts使用transform缩放后导致图标模糊 --的解决办法 当使用了transform: scale(x,y)缩放后致使echarts图表模糊。怎么解决这个问题呢？ 第一种解决办法:将canvas转换成svg。 在初始化时就指定渲染器为svg：echarts.init(dom,null,
阅读全文
摘要：echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候，我们饼状图中echarts的数据可能会很多。 这个时候展示肯定会密密麻麻的。导致显示很凌乱 我们需要'翻页'类似表格展示下一页的数据 在legend中下需要配置属性 type: 'scroll',表示滚动 数据太多可以滚
阅读全文
摘要：容器节点被销毁以及被重建时 假设页面中存在多个标签页， 每个标签页都包含一些图表。 当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。 这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。 本质上，这是由于图表的容器节点被移除导致的。 即使之后该节点被重新添加，图表所在的节点也
阅读全文
摘要：为什么需要使用颜色主题 随着用户审美越来越高，不再是过去那样只注重功能。 所以对界面的颜色样式都具有一定的审美要求 此时颜色是否好看就非常重要了 因为人都是视觉动物 对界面的第一印象肯定都是颜色。 如果颜色好看，用户肯定会被吸引的。 所以我们不得不去配置一下颜色 使用默认颜色主题 我们发现的问题 我
阅读全文
摘要：饼状图不要中间的文字提示信息 emphasis: { label: { show: false, //将这个设置为false }, }, 为什么饼状图不要中间的问题提示信息 因为有些时候，在文字很多的情况下， 饼状图中间的文字就会超出饼状图，因为文字太多了。
阅读全文
摘要：//学校资产占比的配置 function schollAssets() { var myChart = window.$echarts.init( document.getElementById('schollproportion') ) var index = 0 var preindex = 0
阅读全文
