echarts 折线面积区域绘制+手机端四川地图的实现+折线图标点闪烁

第一次接触echarts,之前也没了解过。但是老大突然来需求让画图…没办法 菜鸟只能现学现用了 (一直在放弃的边缘徘徊)
简单记录一下自己这两天画的两个图:

用filter函数设置点在分区段不同的设置不同的样式,具体代码如下:

 data:[8000,19000,9000,2300,6000,10200,14000,10400,11000,10600,10800,2000].map((v,i) => {
            const x = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
            if(v < 7000 || v > 13000) {
              if((v>3000 && v<7000) || (v>= 13000 && v <= 15000)){
                return {coord: [x[i],v], name: '最小值',itemStyle:{color:'#F1C6A3'}};
              }
              else {
                return {coord: [x[i],v], name: '最小值',itemStyle:{color:'#BC5E52'}};
                }
            }
            return false;
            }).filter(v => !!v)

再记录一下第二个图:
在这里插入图片描述
图片放上去有一个标点放大且闪烁的一个效果.
主要使用geo来完成的,绘的是四川的地图,引入了四川的json数据,额…忘了在哪下的了。。。。。(官网貌似有个可以自动生成json文件的入口,去瞅瞅…)
在js中利用ajax异步请求使用json数据的时候居然出现了本地跨域! 对于小菜鸟来说,这也不是个小问题。解决办法:1.在你的项目目录下面安装一个本地服务器,命令为:npm install http-server -S (具体的可以自行百度一下),然后记住 一定要启动起来啊 键入http-serve即可 ;2.如果你使用的是vsCode,那安装一个叫live-server的插件然后用它打开就好了。

标点跟连线都是用的具体城市的经纬度来实现的,在markPoint里面传入coord的值即可。

 // 连线设置
      {
        name:"点连接",
        type:"lines",
        zlevel:2,
        symbol:['none','none'],
        lineStyle:{
          normal: {
          color:"#BB695F",
					width: 2,
					opacity: 0.6,
					curveness: 0.5
          },
        },
        data:[{
          coords:[
            [103.77,29.57],//乐山
           [105.447669,28.879388], // 泸州
          ]
        },
        {
          coords:[
            [103.77,29.57], // 乐山
            [106.63,30.47], // 广安
          ]
        },
        {
          coords:[
            [103.77,29.57],
            [104.071213,30.67], // 成都
          ]
        },
        {
          coords:[
            [103.77,29.57],
            [105.063203,29.59], // 内江
          ]
        }]
      }
    ]

刚刚老大来需求了 要让地图能在手机端缩放…菜鸟要去吐血了
等缩放做完再一起上传代码吧 希望有这一天》。。。

(日常感叹自己为什么这么辣鸡!!!!)


echarts地图的缩放和平移属性:roam ,将其属性值设置为true,zoom可用来设置放大比例,要设置在手机上也能放大缩小,因为使用了json文件,利用本地服务器去启动,本地会存在两个IP地址,一个连接该项目,然后跟手机在用一个局域网下就可以调试是否在手机上也支持缩放.

这里贴一下手机端配置的代码(也就是我的HTML文件代码)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<script src='./libs/jquery.js'></script>
	<script src='./libs/echarts.js'></script>
  <script src='./index.js'></script>
  <!-- <script type="text/javascript" src="./libs/echarts/sichuan.json"></script> -->
	<title>医疗总览图</title>
</head>
<body>
  <div id="cityMap" style="width:600px;height:600px;margin: 40px auto;"></div>
  <script>
    var d = document.documentElement;
    var cw = d.clientWidth || 750;
    document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
</script>
</body>
</html>

最后还简单的了解了一下地图上的点击事件,具体代码如下:

 myCharts.on('click',function(params){
      console.log(params);
      console.log(params.data);  
    })

看一下效果
在这里插入图片描述
具体点击的一些逻辑处理放在函数里即可…

小菜鸡的摸索之路,记录一波~

分割线---------------------------------------------------------------------------------------------------------------

连续画了一周的图 一共是11个页面 每天加班到接近十点,鬼知道我经历了什么。不过值得开心的是 还好都搞定啦 !! 其实最惨的不是加班,而是加班了你都没有做出来 (老板想劝退了…)
继续更新echarts啦 看了一下 感觉自己很多东西描述的不太清楚,菜鸡刚接触写博客,还请大家多多包涵。有任何问题欢迎指出 欢迎讨论 大家一起努力向前冲鸭~~

先记录几个有点小坑的地方吧,还是这个图 是不是很眼熟!没错!!!跟第一个一毛一样…当然这个算是第一个的升级版。采坑之处在于中间两根…(青线?? 好吧不重要) 标记区域的颜色,其实这里一开始我使用的是markArea这个属性,传的是y轴的值对应得到的第一个图,当写页面时数据一传进去,一脸懵逼,全乱了…后来又采坑了折线图的areaStyle ,包含三个属性:start,end 默认值为auto,也就是你区域的走向 start是到线以上X轴,end是到Y轴,要实现交叉颜色 用的覆盖 当然也是不行了(一堆废话),用的是堆叠区域stack这个属性,跟的是string类型的数值,需要堆叠的话 记住 一定要是同一个值!! 我这里是条线都设了的 , 不堆叠的话设为不同值或者false就OK啦 磨了我一早上 唉 日常感叹自己菜鸡…
在这里插入图片描述
我把重要代码放在这个哟 (因为项目私密问题 ,不能全部放啦 图是我用假数据弄的,其实其他代码也跟正常配置差不多哦 想要完整代码的call我一下吧 我就不放在这里啦。。。),

 {
          type: "line",
          name: "低线90",
          symbol: "none",   // 不标点
          stack: "predict",  // 这里的字符串可以自己取哟   要堆叠的话记住一定要相同!!
          itemStyle: {
            normal: {
              color: '#488eef', // 折线条的颜色
            }
          },
          data: 低线90,
        },
        {
          type: "line",
          name: "高线80",
          symbol: "none",
          stack: "predict",   // 一定要相同!!!
          itemStyle: {
            normal: {
              color: '#9dfafc', // 折线条的颜色
              areaStyle: {
                type: 'default',
                // color: '#061619',
                color: "#13242D",
              }
            }
          },
          data: 高线80,
        },

刚刚老板又来需求了 对没错 还是这个图 要让我把标出来的点让它动起来(嘴上笑嘻嘻…当然心里也是笑嘻嘻啦 哈哈哈) 我的脑细胞说它不想活了 我现在去成全一下它,等它安详的去了 我再来更新…

分割线------------------------------------------------------------------------------------------------------------------------------
时隔两个小时,它终于死了。对没错 我就是那么菜…
废话不多说 上效果图(其实我看博客 特别是画图的这种 没有效果图我真的想打人。。。小声喵喵 怕被打)
在这里插入图片描述
很负责任的告诉你 那个点确实是闪烁滴…也废话不多说 上代码:
下面这行代码时配置在series里面的,data可以自己从后台拿数据 我这里是拿过来了 记住 一定要包含value值呀 要不然不会生效哟

{
          type: "effectScatter",
          coordinateSystem: 'cartesian2d',   
          effectType: "ripple",
          data: point,
          showEffectOn: "render", // 何时显示特效
          symbolSize: 6,
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
        }

这里再展示一下数据的代码,因为要根据不同的区域,标的点需要显示不同的颜色,所以用了过滤。

const point = data.map((v, i) => {
      if (v < 低线80[i] || v > 高线80[i]) {
        if ((v > 低线90[i] && v < 低线80[i]) || (v > 高线80[i] && v < 高线90[i])) {
          return { coord: [xData[i], v], value: [xData[i], v], itemStyle: { color: 'rgba(157,250,252,.6)' } };
        }  // coord 是传的标点的坐标跟数值;value传的是使点闪烁的坐标跟数值,虽然一样 但是这里必须得分开传
        else {
          return { coord: [xData[i], v], value: [xData[i], v], itemStyle: { color: 'rgba(74,146,247,.6)' } };
        }
      }
      return false;
    }).filter(v => !!v);

解释一下为什么coord跟value 为什么都一样还要传两次。
因为coord是markpoint里面传入标点坐标的属性,是供markpoint来识别的,而后面的value是传给effectScatter来识别的,在effectScatter里面没有coord这个属性。其实让点闪烁的原理很简单,就是利用effectScatter的闪烁效果来遮盖markpoint里面标的点。
对了 还有一个坑!!! 就是在使用effectScatter,如果你是外部引入的echarts ,一定不能引用带conmon结尾的,如:会报错 说不存在series.effectScatter
改为下面这个就好了

终于完结了!!!!!! 感觉把我这一辈子的echarts图都画完了呢

其实还画了折线分段显示颜色的图 双柱图 双柱图+折线图 单柱+折线 不想写了…有需要的私我吧

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值