Echarts 折线图 渐变色区域图 十字架

最新推荐文章于 2024-04-23 10:33:25 发布
最新推荐文章于 2024-04-23 10:33:25 发布
阅读量614 收藏
点赞数
分类专栏： Vue Echarts
原文链接：https://blog.csdn.net/Bonjours/article/details/103679844
版权

ECharts 折线图 统计图 数据可视化 JavaScript
关键词由CSDN通过智能技术生成
Vue 同时被 2 个专栏收录
24 篇文章 4 订阅
订阅专栏
Echarts
11 篇文章 1 订阅
订阅专栏

效果图：
在这里插入图片描述

完整实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--   折线统计图 -->
    <div class="row">
      <div id="part6" style="width: 100%; height: 240px"></div>
    </div>
  </body>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
  <script type="text/javascript">
    // 指定图表的配置项和数据
    //第6部分
    var dom6 = document.getElementById('part6')
    var myChart6 = echarts.init(dom6)
    var app6 = {}
    option6 = null
    option6 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          //xy轴十字架指示数值背景区域色
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      textStyle: {
        color: '#466293',
      },
      legend: {
        borderColor: ['#0090ff', '#464aff', '#ff605f', '#ffb746'],
        data: ['租客分期', '装修贷', '房东贷', '周转贷'],
        textStyle: {
          color: '#8db0ef',
        },
        //图例标记与顶部标题的距离
        top: 15,
      },
      //简单说grid是控制边距的
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLabel: {
            show: true,
            textStyle: {
              //fontSize: 16,
              color: '#466293',
              fontFamily: 'DINProRegular',
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#00345c',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00345c',
            },
          },
        },
      ],
      yAxis: [
        {
          name: '(%)',
          type: 'value',
          min: 0,
          max: 100,
          interval: 20,
          //y轴文字属性设置
          axisLabel: {
            textStyle: {
              fontSize: 16,
              color: '#466293',
              fontFamily: 'DINProRegular',
            },
            formatter: '{value}',
          },
          //y轴横向分割线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0c3668',
            },
          },
          //y轴刻度线颜色
          axisTick: {
            show: false,
            lineStyle: {
              color: '#00345c',
            },
          },
          //y轴边框颜色
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00345c',
            },
          },
        },
      ],
      series: [
        {
          name: '租客分期',
          type: 'line',
          //如果不想折线那么尖锐，可以加上smooth: true变为柔和曲线
          //smooth: true,
          //stack: '总量',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0, 144, 255,0.7)',
              },
              {
                offset: 1,
                color: 'rgba(0, 144, 255,0)',
              },
            ]),
          },
          lineStyle: {
            color: '#0090ff',
          },
          data: [0, 0, 1.25, 7.9, 94.93, 17.65, 10.13, 13.17, 15.22, 15.22, 11.93, 5.5],
        },
        {
          name: '装修贷',
          type: 'line',
          //smooth: true,
          //如果想要y轴的数值不相加，就要去掉stack参数。否则数值就会相加。
          //stack: '总量',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(70, 74, 255,0.7)',
              },
              {
                offset: 1,
                color: 'rgba(70, 74, 255,0)',
              },
            ]),
          },
          lineStyle: {
            color: '#464aff',
          },
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        },
        {
          name: '房东贷',
          type: 'line',
          //smooth: true,
          //stack: '总量',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255, 96, 95,0.7)',
              },
              {
                offset: 1,
                color: 'rgba(255, 96, 95,0)',
              },
            ]),
          },
          lineStyle: {
            color: '#ff605f',
          },
          data: [0, 0, 0, 0, 0, 62.5, 12.5, 0, 62.5, 37.5, 12.5, 0],
        },
        {
          name: '周转贷',
          type: 'line',
          //smooth: true,
          //stack: '总量',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255, 183, 70,0.7)',
              },
              {
                offset: 1,
                color: 'rgba(255, 183, 70,0)',
              },
            ]),
          },
          lineStyle: {
            color: '#ffb746',
          },
          data: [0, 0, 0, 0, 66.67, 0, 0, 0, 0, 0, 66.67, 0],
        },
      ],
    }

    if (option6 && typeof option6 === 'object') {
      myChart6.setOption(option6, true)
    }
  </script>
</html>
Windyluna
关注
专栏目录
echarts折线图实现渐变效果
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
01-10 1万+
先看下效果图是这个样子的 ，和普通的折线图最明显的区别就是需要做成渐变效果。 目录 1、官网找例子 2、初步改造示例，有个雏形 3、细节改造和优化 4、全部代码 5、原始效果和完成效果对比 1、官网找例子 样例地址：https://echarts.apache.org/examples/zh/editor.html?c=area-basic 官网初始option 复制到项目中，得到的效果如下图（width:424px;height:200px;）： 2、...
echarts折线图，渐变背景色
weixin_43899935的博客
07-07 2990
{ grid: { right: "3%" }, tooltip: { trigger: "axis", backgroundColor: "rgba(38, 104, 255, 0.36)", padding: [5, 15] }, xAxis: [ { type: "category",
Echarts 指示器十字焦点固定在折线（数据）上
m0_59354754的博客
07-07 4916
一开始设置Echarts的指示器axisPointer， 焦点是跟着鼠标点击的位置，但是期望的焦点是在红色折线上，如下图所示 axisPointer设置的关键代码： tooltip: { trigger: "axis", triggerOn: "mousemove", position: [-5, 0], axisPointer: { type: "cross", snap: true,
echarts折线区域图
weixin_34364071的博客
10-17 747
一、使用场景 　　 当舒张压和收缩压超过或低于他们对应的范围时，折线应该给与不同颜色。两个指标对应的范围也要填充不同的颜色。 二、实现方案 　　主要使用了echarts中的visualMap，series.markArea；visualMap作用是定义数据范围，利用不同范围定义不同的颜色，其中visualMap.seriesIndex的值对应series.data。seri...
echart折线区域图
热心市民小胖纸的博客
04-20 2354
在引入echart区域折线图时，没有出现对应的区域图 当发现引入下面代码到自己的代码中并没有对应的区域图 option = { xAxis: { type: 'category', boundaryGap: false, data: mydata.xname(改成自己的数据) }, yAxis: { ...
十字折线图
yanhdaidong的博客
06-15 218
无
数据可视化高级技术Echarts(折线图)
m0_63181360的博客
04-08 3158
一、什么是折线图折线图是用折线将各个数据点连接起来的图表，用于展现数据的变化趋势。二、如何实现1.基本折线图只需要在数据序列series中将类型定义为type:line即可实现最基本的折线图2.如何变得平滑只需要定义：smooth是否平滑视觉引导线，默认不平滑，可以设置成true平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。一般来说ture够用3.如何定义线条的样式整体样式在linestyle中进行设置color：设置线的颜色支持使用#fff。
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
Echarts 折线图背景渐变色
xiaohuichonga的博客
03-07 3393
echarts使用
echarts三段渐变色 折线图
ET_ing的博客
07-29 512
将折线分三段： 1、大于8cm的线段为红色，并且波峰部分为红色。 2、大于5cm的线段为橙色，并且渐变为橙色。 3、大于1cm的线段为黄色，并且渐变成黄色。 4、小于1cm的线段为灰色。 5、数字、标记名称分别局图形左右。............
一、基础折线图详解《手把手教你 ECharts 数据可视化详解》
1_bit 的博客
12-08 2858
注：本系列教程需要对应 JavaScript 、html、css 基础，否则将会导致阅读时困难，本教程将会从 ECharts 的官方示例出发，详解每一个示例实现，从中学习 ECharts 。ECharts 官方示例：https://echarts.apache.org/examples/zh/index.html我们打开 ECharts 的示例界面，找到折线图中的基础折线图： 打开折线图后，左侧则是对应的代码，右侧则是对应的折线图演示：本系列文字将会以 JavaScript 代码为讲解代码。我们先从基础折线
echart实现基金走势图十字坐标随手指滑动显示
qq_37057426的博客
10-26 1706
/ 模拟十字轴的横轴// 获取点击位置的坐标// containPixel为true则点击位置在坐标轴内// 传入鼠标位置坐标进行转化// convertFromPixel返回[x, y],x对应鼠标点击处数据的下标,y对应鼠标点击处的数值if (!return;// 修改markLine的值// 重新setOption// 设置选中的内容} else {// 不在坐标轴内不展示markLine});});});// 设置选中的内容});
防股票折线图十字定位(achartengine)
deng_gai的博客
12-01 517
防股票折线图十字定位(achartengine)
echarts折线图背景颜色自定义，实心圆点，虚线网格等功能
请叫我欧皇！的博客
07-14 5725
需求：根据传入的值对背景进行分层颜色展示，比如y轴20-40区间颜色为蓝色，40-50为红色这种，折线图的小圆点设置为实现，实现缩放功能。
Swift - 第三方图表库Charts使用详解4（折线图3：选中点高亮、十字线样式）
Dermi
07-24 1477
三、选中后十字线样式 当我们选中某个拐点时，该点会高亮（显示十字线），这个十字线的样式是可以修改的。 1，修改十字线的样式 原文:Swift - 第三方图表库Charts使用详解4（折线图3：选中点高亮、十字线样式） chartDataSet.highlightColor = .blue //十字线颜色 chartDataSet.highlightLineWidth = 2 //十字线线宽 chartDataSet.highlightLineDashLengths = [4, 2] //使用虚线样式的十字线
使用echarts实现类似股票k图可拖拽可悬浮十字线
qq_16828495的博客
05-11 1744
实现难点需要悬浮出现十字线,再次点击后可拖拽 点击屏幕后鼠标悬浮 实现思路点击折线图屏幕后开启或者开启可拖拽 chartDomBig.getZr().off("click");//不写的话会重复触发 chartDomBig.getZr().on("click", (param) => { this.isShowTools = !this.isShowTools;//关闭开启判断 }); //监听当前数据并更新 watch: {
关于修改echarts在datazoom中鼠标指针为十字准星的问题
最新发布
ikedaelaiza的博客
04-23 532
需求:当图表的datazoom为insider时,鼠标移入折线图折点,修改鼠标样式为手型;即元素的cursor属性为pointer(默认为crosshair)解决:直接操作echart渲染的canvas的dom元素并修改。鼠标会在触碰折点的一瞬间变为手型,之后变回为十字准星。
echarts 折线图渐变色背景
07-27
要为echarts折线图设置渐变色背景，可以使用areaStyle属性和LinearGradient函数来实现。在series中设置areaStyle的color属性为一个LinearGradient对象，通过设置colorStops属性来定义渐变色的起始和结束颜色。例如，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值