echarts中使用graphic在画布上写文字

最新推荐文章于 2024-07-04 11:27:43 发布
最新推荐文章于 2024-07-04 11:27:43 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： js 文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42535013/article/details/126362882
版权

Echarts 折线图 graphic 文本标注 区间文案
关键词由CSDN通过智能技术生成

一个项目需求：折线图中每个区间展示一个文案
在这里插入图片描述
使用echarts中的graphic配置选项

graphic: [
  {
    type:'text',
    right: '15%',
    top: '10%',
    z: 999,
    style:{
      text: '极度拥挤',
      fill: '#E72938',
      fontWeight: 400,
      fontSize: 10
    }
  },
  {
    type:'text',
    right: '15%',
    top: '25%',
    z: 999,
    style:{
      text: '拥挤',
      fill: '#FF891A',
      fontWeight: 400,
      fontSize: 10
    }
  },
  {
    type:'text',
    right: '15%',
    top: '41%',
    z: 999,
    style:{
      text: '正常',
      fill: '#523CF2',
      fontWeight: 400,
      fontSize: 10
    }
  },
  {
    type:'text',
    right: '15%',
    top: '55%',
    z: 999,
    style:{
      text: '畅通',
      fill: '#50A5FE',
      fontWeight: 400,
      fontSize: 10
    }
  },
  {
    type:'text',
    right: '15%',
    top: '71%',
    z: 999,
    style:{
      text: '极度畅通',
      fill: '#1CD6F3',
      fontWeight: 400,
      fontSize: 10
    }
  }
],

完整的options选项

{
  graphic: [
    {
      type:'text',
      right: '15%',
      top: '10%',
      z: 999,
      style:{
        text: '极度拥挤',
        fill: '#E72938',
        fontWeight: 400,
        fontSize: 10
      }
    },
    {
      type:'text',
      right: '15%',
      top: '25%',
      z: 999,
      style:{
        text: '拥挤',
        fill: '#FF891A',
        fontWeight: 400,
        fontSize: 10
      }
    },
    {
      type:'text',
      right: '15%',
      top: '41%',
      z: 999,
      style:{
        text: '正常',
        fill: '#523CF2',
        fontWeight: 400,
        fontSize: 10
      }
    },
    {
      type:'text',
      right: '15%',
      top: '55%',
      z: 999,
      style:{
        text: '畅通',
        fill: '#50A5FE',
        fontWeight: 400,
        fontSize: 10
      }
    },
    {
      type:'text',
      right: '15%',
      top: '71%',
      z: 999,
      style:{
        text: '极度畅通',
        fill: '#1CD6F3',
        fontWeight: 400,
        fontSize: 10
      }
    }
  ],
  grid: {
    x: 0,
    y: 10,
    x2: 0,
    y2: 30,
    containLabel: true
  },
  xAxis: {
    boundaryGap: false,
    type: 'category',
    data: dateList,
    axisTick: {
      // 是否显示x轴刻度
      show: false
    },
    axisLine: {
      // 是否显示x轴线
      show: false
    },
    axisLabel: {
      color: '#999999',
      interval: 0,
      formatter: (value, index) => {
        const length = dateList.length
        if (index === 0) {
          return '               ' + dayjs(value).format('YYYY-MM')
        }
        if (index === length - 1) {
          return dayjs(value).format('YYYY-MM') + '               '
        }
        if (length > 3 && parseInt(length / 2) === index) {
          return dayjs(value).format('YYYY-MM')
        }
        return ''
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      min: 100,
      max: 0,
      splitNumber: 10, //设置坐标轴的分割段数
      interval: (100 - 0) / 5, // 标轴分割间隔
      axisLabel: {
        color: '#999999'
      }
    },
    {
      type: 'value',
      min: minData2,
      max: maxData2,
      splitNumber: 10,
      interval: (maxData2 - minData2) / 5,
      axisLabel: {
        color: '#999999',
        formatter: function (value) {
          return value.toFixed(0)
        }
      }
    }
  ],
  series: [
    {
      name: '走势线1',
      type: 'line',
      color: ['#E72938'],
      symbol: 'none',
      smooth: true,
      yAxisIndex: 0, //在单个图表实例中存在多个y轴的时候有用
      data: crowdList,
      lineStyle: {
        width: 1
      },
      markArea: { //标记区域
        data: [
          [{
            yAxis: '100',//y轴坐标控制
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#FEFAF9' // 0% 处的颜色
                }, {
                    offset: 1, color: '#FEF5F3' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              disabled: true
            }
          }, {
            yAxis: '80'
          }],
          [{
            yAxis: '80',//y轴坐标控制
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#FFFEFB' // 0% 处的颜色
                }, {
                    offset: 1, color: '#FEFAF3' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              disabled: true
            }
          }, {
            yAxis: '60'
          }],
          [{
            yAxis: '60',//y轴坐标控制
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#FAFAFF' // 0% 处的颜色
                }, {
                    offset: 1, color: '#F1F0FF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              disabled: true
            }
          }, {
            yAxis: '40'
          }],
          [{
            yAxis: '40',//y轴坐标控制
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#F4FAFF' // 0% 处的颜色
                }, {
                    offset: 1, color: '#E5F3FF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              disabled: true
            }
          }, {
            yAxis: '20'
          }],
          [{
            yAxis: '20',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#F6FDFF' // 0% 处的颜色
                }, {
                    offset: 1, color: '#EDFAFE' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              disabled: true
            },
          }, {
            yAxis: '0'
          }]
        ]
      },
    },
    {
      name: '走势线2',
      type: 'line',
      color: ['#2C7AF4'],
      symbol: 'none',
      smooth: true,
      yAxisIndex: 1,
      data: valueList,
      lineStyle: {
        width: 1
      }
    }
  ]
}
下键_如有神
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 网格属性_echarts 绘制网格 教你使用graphic
weixin_39715907的博客
12-19 1444
echarts 绘制网格 教你使用graphic主子镇楼不经常使用的echarts的同学对于echarts 的认识基本停留在饼图，柱形图，条形图，折线图等一系列常规图形上，对于网格基本是一脸懵，小伙伴会问了网格不都是用canvas或者svg话的吗？ 这一类不特殊图标一般都是D3定制的(不了解D3的小伙伴请移步：D3.js官网)就不多解释了！我们一般不会为了一个图，而引用一个插件或者图库，代价太大，...
echarts中graphic_ECharts图形元素组件（graphic）
热门推荐
weixin_35891825的博客
12-23 1万+
ECharts 图表中原生图形元素组件 graphic 可以支持包括：image，circle，ring，polygon，rect，bezierCurve，arc 等等的图形元素。这些图形元素如何设置、层级关系如何、相对定位怎么实现，我们在本节内容中会做出介绍。下面，我们先通过简单的两个例子，看看 ECharts 图形元素组件是如何使用的。下面示例中，使用图形元素做了水印，和文本块：下面示例中，使...
怎么样使用Graphic画直线和曲线
12-16
这个小作业我用Graphic做的一个画图程序，看了肯定会用Graphic了 仅对于初学者啊
Echarts设置环形图中心文字
发渐稀的博客
11-21 9921
通过这种方式确实可以达到效果，但是，label的主要目的是用来配置环形图提示信息的，而不是用来配置环形图中心文字的，而且如果使用这种方式，那么，环形图中心文字和环形图各部分的提示信息是不能同时存在的，如果强行把label写成数组形式，把提示信息加上去，那么，提示信息就会和中心文字一起在环形图中心层叠显示。但是，如果环形图位置不是居中的，也就是相比于默认值而言发生了偏移，那么，graphic中也需要手动的进行配置才行；那么，使用该定位其位置也设置为center，中心文字和环形图都居中，效果很好。
【饼图交通方式】用ECharts的graphic配置打造个性化
最新发布
No_Name_Cao_Ni_Mei的博客
07-04 510
通过ECharts的graphic配置，我们可以在图表中加入各种自定义图形元素，这不仅能够提升图表的美观度，还能增强信息的传达效果。本文通过一个具体的示例，展示了如何在饼图中添加中心图像，但这只是graphic能力的冰山一角。ECharts提供了更多种类的图形元素和配置选项，等待你去探索和实践。
Echarts -- graphic 实现自定义图片/文字
Le_12345679的博客
01-11 7477
1.graphic 组件相关配置参考：ECharts图形元素组件（graphic）_w3cschool 2. graphic 是与 series 同级别的对象，参考如下： series: [{ // ...... }], graphic: [{ type: 'group',// 组（可以包含图形、文字、图片） left: 0, top: 'bottom', children: [{ type: 'rect', ..
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心）
苦瓜_小学生的博客
04-25 1723
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心） 给图表添加自定义文字 给图表添加自定义图片
在Echarts中使用graphic配置无数据展示图表样式。
weixin_59094532的博客
09-09 3188
在Echarts中使用graphic配置无数据展示图表样式。
echarts圆环中间显示文字.docx
01-20
使用ECharts在圆环图中间显示文字需要使用graphic对象来定义文字的信息，并使用style对象来定义文字的样式。同时，我们还需要使用series对象来定义圆环图的数据，并使用label对象来指定标签的格式。 ECharts圆环图...
echarts图形上绘制可以拖动的游标线
10-31
在本文中，我们将深入探讨如何使用ECharts JavaScript库在图形上绘制可以拖动的游标线。ECharts是一个由百度开发的开源数据可视化工具，它提供了丰富的图表类型和灵活的配置选项，使得开发者能够轻松创建交互式的...
在Echarts图中给坐标轴加一个标识线markLine
11-20
当X轴不是数值时，而是一个类型数据，如年份，公司名，企业名，这时Echarts图就不是从X轴起始位置开始的，所以我们就要给X轴加一个虚拟的值’0’，在markLine中也是在赋值起始位置X轴值时，放置虚拟数据，并且设置一...
ChartGraphics
06-16
使用C#语言创建动态链接库，开发环境VS2008。 使用者可以方便的使用库中提供的类，绘制图表，既可以是2D的条形图，也可以是3D的柱状图，图表效果非常接近Excel绘制的条形图和柱状图。使用者也可以容易的设置生成图片的width，height，alpha，mode等状态，置换xy的数据显示。 文档详细，方便使用者查阅，并提供使用实例，方便快速入手学习。 提供源代码。可能程序有不尽人意的地方，请使用者见谅，可以查看源代码做修改。
echarts常用语法
05-15
`graphic` 配置项用于在图表上添加图形元素，如水印等。 ```javascript graphic: { elements: [ { type: 'image', style: { image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0...
echarts中graphic_graphic组件
weixin_42299131的博客
12-23 3619
设置ECharts直线元素graphic.elements[i]-line直线。graphic.elements[i]-line.type[ 默认值 line ]用 setOption 首次设定图形元素时必须指定。 可取值：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, grou...
echarts中graphic_Echarts graphic原生图形元素组件
weixin_39634900的博客
01-14 7183
前面的文章介绍了Echarts通用配置项，这篇文章进入第二个主题介绍：Echarts graphic原生图形元素组件。graphic 是原生图形元素组件。可以支持的图形元素包括：Image, Text, Circle, Sector, Ring, Rect, Polygon, Polyline, Line, BezierCurve, Arc, Group 。这篇文章分别介绍graphic的通用设置...
echarts graphic为图表添加图形等元素
weixin_43294560的博客
08-03 5096
1、配置 option={ ..., graphic: { type: 'image', ... } } 支持添加的类型有:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, 2、多个图形以及嵌套容器 graphic: [ {
echarts中graphic_ECharts的使用与总结
weixin_29079643的博客
12-23 1686
ECharts的使用与总结一,介绍与需求1.1,介绍ECharts商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE6/7/8/9/10/11，chrome，firefox，Safari等)，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等...
简易导航栏
Node.js安装报错 - npm -v 查看版本无效
09-23 231
HTML+CSS实现简易导航栏 知识点: 块级元素 / 行内元素 / 行内块 的区别/特点? 块级元素 独占一行 可以设置宽度 高度 内外边距 宽度默认是容器(父级宽度)的100% 是一个容器或者盒子,里面可以放块级或者行内元素 注意:文字类的元素(例如 :p元素,h1-h6元素)内不能放 块级元素 行内元素 相邻行内元素,一行显示多个 宽度 和 高度 设置无效 默认宽度是 本身内容的宽度 行内元素 内只能容纳 文本或者其他行内元素 注意: 链接内不能再放链接; 链接a内可以放块级元素,需要将
echarts中graphic_使用ECharts实现状态区间图
weixin_39532754的博客
12-23 1322
需求背景假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以wan0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。根据此图，很容易想到可以用条形图试试。但后来发现，如果用...
echarts中使用graphic用法
05-20
ECharts 中的 `graphic` 可以用来添加图形元素，包括文本、图片、矩形、圆形、线段等等。它的使用方法如下： 1. 在 `option` 中添加 `graphic` 属性，值为一个数组，数组中每个元素代表一个图形元素。 2. 每个图形元素都需要设置一个唯一的 `id` 属性，以便在后面的操作中引用。 3. 根据需要设置图形元素的 `type` 属性，比如设置为 `text` 表示文本，设置为 `image` 表示图片，设置为 `rect` 表示矩形，设置为 `circle` 表示圆形，设置为 `line` 表示线段等等。 4. 根据需要设置图形元素的 `style` 属性，比如设置文本内容、字体大小、颜色、位置等等。 5. 根据需要设置图形元素的 `shape` 属性，比如设置矩形的宽度、高度、圆角半径等等。 6. 根据需要设置图形元素的 `position` 属性，表示图形元素的位置，可以设置为绝对位置或相对位置。 7. 根据需要设置图形元素的 `z` 属性，用来控制图形元素的层级关系，值越大表示越靠前。 下面是一个使用 `graphic` 添加文本和图片的示例： ``` option = { graphic: [ { id: 'text1', type: 'text', style: { text: 'Hello ECharts', font: 'bold 16px Arial', fill: '#333', x: 50, y: 50 } }, { id: 'image1', type: 'image', style: { image: 'https://www.echartsjs.com/zh/asset/img/logo.png', width: 100, height: 100, x: 100, y: 100 } } ], series: [ { data: [1, 2, 3, 4, 5], type: 'bar' } ] }; ``` 在上面的示例中，我们添加了一个文本和一个图片。文本的 `id` 设置为 `text1`，类型为 `text`，内容为 `Hello ECharts`，字体为 `bold 16px Arial`，颜色为 `#333`，位置为 `(50, 50)`。图片的 `id` 设置为 `image1`，类型为 `image`，图片地址为 `https://www.echartsjs.com/zh/asset/img/logo.png`，宽度为 `100`，高度为 `100`，位置为 `(100, 100)`。在 `series` 中我们添加了一个柱状图的数据系列。 除了文本和图片，`graphic` 还支持添加其他类型的图形元素，具体可以参考 ECharts 官网的文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值