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

最新推荐文章于 2024-10-29 16:44:12 发布
原创 最新推荐文章于 2024-10-29 16:44:12 发布 · 3.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #javascript #ecmascript

本文详细介绍了如何在Echarts折线图中使用graphic配置实现每个区间显示不同文案，包括了文本类型的配置、位置和样式设置。

一个项目需求：折线图中每个区间展示一个文案
在这里插入图片描述
使用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
      }
    }
  ]
}
ECharts graphic 的学习
m0_72030584的博客
02-27 947
本文主要学习ECharts的graphic属性的配置和使用
前端echarts模板网站和每个属性的详解
一个超爱喝可乐的web前端攻城狮
03-08 1252
前端echarts模板网和每个属性的详解 https://www.makeapie.com/explore.html#sort=ranktimeframe=allauthor=all 上面这个是echarts的模板网里面有很多各式各样的echarts图表还有源码可以找到自己需要的echarts图表 theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87ce
Echarts -- graphic 实现自定义图片/文字
Le_12345679的博客
01-11 9019
1.graphic 组件相关配置参考：ECharts图形元素组件（graphic）_w3cschool 2. graphic 是与 series 同级别的对象，参考如下： series: [{ // ...... }], graphic: [{ type: 'group',// 组（可以包含图形、文字、图片） left: 0, top: 'bottom', children: [{ type: 'rect', ..
关于在echarts中插入/自定义动态文字文本
weixin_44830518的博客
03-16 1万+
整理了一下在echarts中插入简单文本的三种方法： 1.title（echarts title属性设置：https://www.jianshu.com/p/27bbc7895295） 2.lengend (echarts lengend属性设置：https://www.jianshu.com/p/79c8acffeb53) 3.graphic 1.title定义文字，效果如下图所示： （这里将数字和“发布活动”分别用标题和副标题，达到样式效果） 参考链接：https://blog.csdn.net/we
echarts 网格属性_echarts 绘制网格 教你使用graphic
weixin_39715907的博客
12-19 1597
echarts 绘制网格 教你使用graphic主子镇楼不经常使用的echarts的同学对于echarts 的认识基本停留在饼图，柱形图，条形图，折线图等一系列常规图形上，对于网格基本是一脸懵，小伙伴会问了网格不都是用canvas或者svg话的吗？ 这一类不特殊图标一般都是D3定制的(不了解D3的小伙伴请移步：D3.js官网)就不多解释了！我们一般不会为了一个图，而引用一个插件或者图库，代价太大，...
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心）
苦瓜_小学生的博客
04-25 5587
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心） 给图表添加自定义文字 给图表添加自定义图片
echart常用图表配置
qq_43399210的博客
08-02 542
【代码】echart常用图表配置。
echarts属性之graphic
lotte
10-29 4862
是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,下面示例中，使用图形元素做了水印，和文本块：下面示例中，使用隐藏的图形元素实现了拖拽：graphic 设置介绍只配一个图形元素时的简写方法： 配多个图形元素： 使用 setOption 来删除或更换（替代）已有的图形元素： 注意，如果没有指定 id，第二次 setOption
在Echarts中使用graphic配置无数据展示图表样式。
weixin_59094532的博客
09-09 3567
在Echarts中使用graphic配置无数据展示图表样式。
echarts方法中的graphic
07-29
- *2* [echarts中使用graphic在画布上写文字](https://blog.csdn.net/weixin_42535013/article/details/126362882)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
ChartGraphics
06-16
使用C#语言创建动态链接库，开发环境VS2008。 使用者可以方便的使用库中提供的类，绘制图表，既可以是2D的条形图，也可以是3D的柱状图，图表效果非常接近Excel绘制的条形图和柱状图。使用者也可以容易的设置生成图片的width，height，alpha，mode等状态，置换xy的数据显示。 文档详细，方便使用者查阅，并提供使用实例，方便快速入手学习。 提供源代码。可能程序有不尽人意的地方，请使用者见谅，可以查看源代码做修改。
echarts插件 x轴上的文字加graphic画图形
最新发布
03-21
好的，我现在需要帮助用户解决在ECharts中使用graphic组件自定义X轴文字并绘制图形的问题。首先，我需要理解用户的需求。用户提到他们想通过graphic组件在X轴上添加自定义文字和绘制图形，可能对默认的X轴配置不太...
使用echarts模拟立体柱形图
呱呱的博客
05-26 4805
注意：请使用echarts v4.4.0以上版本 renderItem 函数提供了两个参数： params：包含了当前数据信息（如 seriesIndex、dataIndex 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。 api：是一些开发者可调用的方法集合（如 api.value()、api.coord()）。 var MyCubeRect = echarts.graphic.extendShape({ shape: { x: 0, y: 0,
echarts的graphic属性
03-08
首先，graphic是ECharts中用于自定义图形元素的组件，允许用户直接在画布上添加形状、文本、图片等。用户可能需要这个来添加一些dataZoom无法实现的定制元素，比如标注、装饰图形或者动态效果。 用户可能的使用场景...
echarts的graphic实现标注点
03-18
`graphic` 是 ECharts 的原生图形组件，可直接在画布上绘制图形（如圆形、矩形、文本等）。通过精准定位，可将其作为数据点的标注工具。 --- ### 二、基础实现代码 ```javascript option = { // 数据部分（示例...
echarts中graphic_ECharts图形元素组件（graphic）
热门推荐
weixin_35891825的博客
12-23 1万+
ECharts 图表中原生图形元素组件 graphic 可以支持包括：image，circle，ring，polygon，rect，bezierCurve，arc 等等的图形元素。这些图形元素如何设置、层级关系如何、相对定位怎么实现，我们在本节内容中会做出介绍。下面，我们先通过简单的两个例子，看看 ECharts 图形元素组件是如何使用的。下面示例中，使用图形元素做了水印，和文本块：下面示例中，使...
echarts中graphic_graphic组件
weixin_42299131的博客
12-23 3985
设置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 7929
前面的文章介绍了Echarts通用配置项，这篇文章进入第二个主题介绍：Echarts graphic原生图形元素组件。graphic 是原生图形元素组件。可以支持的图形元素包括：Image, Text, Circle, Sector, Ring, Rect, Polygon, Polyline, Line, BezierCurve, Arc, Group 。这篇文章分别介绍graphic的通用设置...
echarts graphic为图表添加图形等元素
weixin_43294560的博客
08-03 6321
1、配置 option={ ..., graphic: { type: 'image', ... } } 支持添加的类型有:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, 2、多个图形以及嵌套容器 graphic: [ {
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值