echart常用图表配置

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

echart常用图表配置

柱状图

3D柱状图

效果

在这里插入图片描述

代码

import { graphic } from 'echarts'

const VALUE = Array.from({ length: 24 }, () => Math.floor(Math.random() * (5000 - 1000)) + 1000)

const CubeLeft = graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x, shape.y]
    const c1 = [shape.x - 9, shape.y - 9]
    const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
    const c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath()
  }
})
const CubeRight = graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c1 = [shape.x, shape.y]
    const c2 = [xAxisPoint[0], xAxisPoint[1]]
    const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
    const c4 = [shape.x + 18, shape.y - 9]
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath()
  }
})
const CubeTop = graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y]
    const c2 = [shape.x + 18, shape.y - 9]
    const c3 = [shape.x + 9, shape.y - 18]
    const c4 = [shape.x - 9, shape.y - 9]
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath()
  }
})
graphic.registerShape('CubeLeft', CubeLeft)
graphic.registerShape('CubeRight', CubeRight)
graphic.registerShape('CubeTop', CubeTop)
const option = {
  backgroundColor: '#010d3a',
  title: {
    left: 'center',
    text: '数量统计',
    textStyle: {
      color: '#A2D4E6',
      fontSize: 14
    }
  },
  grid: {
    left: 20,
    right: 40,
    bottom: '19%',
    containLabel: true
  },
  xAxis: {
    name: '时间',
    type: 'category',
    data: Array.from(new Array(23 + 1).keys()).slice(0),
    axisLine: {
      show: true,
      lineStyle: {
        color: '#3eb2e8'
      }
    },
    offset: 20,
    axisTick: {
      show: false,
      length: 9,
      alignWithLabel: true,
      lineStyle: {
        color: '#7DFFFD'
      }
    },
    axisLabel: {
      fontSize: 10
    }
  },
  yAxis: {
    name: '数量',
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#3eb2e8'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#4784e8'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      fontSize: 16
    },
    boundaryGap: ['20%', '20%']
  },
  series: [
    {
      type: 'custom',
      renderItem: (_params, api) => {
        const location = api.coord([api.value(0), api.value(1)])
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                ])
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                ])
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                ])
              }
            }
          ]
        }
      },
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      data: VALUE
    }
  ]
}

排行榜柱状图

效果

在这里插入图片描述

代码

import { graphic } from 'echarts'
const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    grid: {
      left: '4%',
      right: '8%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      name: '流量',
      nameLocation: 'end',
      nameTextStyle: {
        color: '#A2D4E6',
        fontSize: 14,
        fontWeight: 400
      },
      offset: 20,
      nameGap: -10,
      position: 'top',
      show: true,
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        //网格线
        show: false
      }
    },
    yAxis: {
      name: '名称',
      nameTextStyle: {
        color: '#A2D4E6',
        fontSize: 14,
        fontWeight: 400,
        padding: [0, 0, 0, -80]
      },
      type: 'category',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        interval: '0',
        textStyle: {
          fontSize: 12,
          color: '#687284'
        }
      },
      data: [
        '10xxxx',
        '9xxxx',
        '8xxxx',
        '7xxxx',
        '6xxxx',
        '5xxxx',
        '4xxxx',
        '3xxxx',
        '2xxxx',
        '1xxxx'
      ]
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#00E4FF' },
            { offset: 1, color: '#008AFF' }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            color: '#687284',
            fontSize: '10'
          }
        },
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      }
    ]
  }

排行榜反转柱状图

效果

在这里插入图片描述

代码

import { graphic } from 'echarts'

const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    grid: {
      left: '8%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      name: '得分',
      nameLocation: 'end',
      nameTextStyle: {
        color: '#A2D4E6',
        fontSize: 14,
        fontWeight: 400
      },
      offset: 20,
      nameGap: -10,
      position: 'top',
      show: true,
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        //网格线
        show: false
      },
      inverse: true //反转坐标轴
    },
    yAxis: {
      name: '名称',
      nameTextStyle: {
        color: '#A2D4E6',
        fontSize: 14,
        fontWeight: 400,
        padding: [0, 0, 0, 80]
      },
      type: 'category',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        interval: '0',
        textStyle: {
          fontSize: 12,
          color: '#687284'
        }
      },
      position: 'right',
      data: [
        '10xxxx',
        '9xxxx',
        '8xxxx',
        '7xxxx',
        '6xxxx',
        '5xxxx',
        '4xxxx',
        '3xxxx',
        '2xxxx',
        '1xxxx'
      ]
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: new graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#00E4FF' },
            { offset: 1, color: '#008AFF' }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        label: {
          normal: {
            show: true,
            position: 'left',
            color: '#687284',
            fontSize: '10'
          }
        },
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      }
    ]
  }
JokerLee...
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts中graphic_Echarts graphic原生图形元素组件
weixin_39634900的博客
01-14 7081
前面的文章介绍了Echarts通用配置项，这篇文章进入第二个主题介绍：Echarts graphic原生图形元素组件。graphic 是原生图形元素组件。可以支持的图形元素包括：Image, Text, Circle, Sector, Ring, Rect, Polygon, Polyline, Line, BezierCurve, Arc, Group 。这篇文章分别介绍graphic的通用设置...
echarts中graphic_ECharts图形元素组件（graphic）
weixin_35891825的博客
12-23 1万+
ECharts 图表中原生图形元素组件 graphic 可以支持包括：image，circle，ring，polygon，rect，bezierCurve，arc 等等的图形元素。这些图形元素如何设置、层级关系如何、相对定位怎么实现，我们在本节内容中会做出介绍。下面，我们先通过简单的两个例子，看看 ECharts 图形元素组件是如何使用的。下面示例中，使用图形元素做了水印，和文本块：下面示例中，使...
echarts 引入报错问题的解决
热门推荐
Aochen的博客
08-28 4万+
要用echarts画一个世界地图,遇到了很多问题,这里记录一下: 1. XXX  is not a function 或者 XXX is not defined 报错 解决思路:  一开始是用required 设置path引入的,结果报错:required is not defined,改成标签形式引入,结果报 XXX is not a function,搜索后发现是echarts.js 版本
echarts graphic为图表添加图形等元素
weixin_43294560的博客
08-03 5031
1、配置 option={ ..., graphic: { type: 'image', ... } } 支持添加的类型有:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, 2、多个图形以及嵌套容器 graphic: [ {
Echarts基础学习 7-graphic和可拖拽点
qkdgz的博客
06-08 523
graphic，可拖拽点，事件
Echart调用graphic报错
Tiger_shl的博客
04-10 5550
在使用EChart绘制图表时,页面报错.提示 "echarts.graphic is undefined" 调试发现,在文件中有段如下代码,使用了graphic itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ ...
echarts使用
qq_45787897的博客
12-04 276
使用ECharts 使用NPM： npm install echarts --save. 画一个简单的图表 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- including ECharts file --> <script sr...
echarts图表的使用
yungpheng的博客
11-10 7898
一、介绍 ECharts，一个纯 Javascript 的图表库，可以流畅的运行在PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，
echarts图表使用
laughing
04-21 182
echarts是一款纯js的图标库，兼容pc，移动端，一款可视化报表； 使用流程 1，到时候js库 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min....
echart统计图表
03-27
在项目中引入这个文件后，开发者就可以通过调用`echarts.init()`方法初始化图表容器，然后使用`setOption()`方法设置图表的配置项，从而生成所需的图表。ECharts还支持按需引入，减少不必要的资源加载，提高页面性能...
百度Echart开源图表demo
08-14
- **Echarts API**：Echarts提供了丰富的API接口，如`init()`用于创建图表实例，`setOption()`用于设置图表配置项，`dispose()`用于销毁图表等。 - **数据绑定**：Echarts图表的数据来自JavaScript对象，开发者需要...
常用 echarts 的配置
05-26
在本文中，我们将深入探讨ECharts的常用配置及其在实践中的应用。 1. **基本配置项** - `title`: 标题组件，用于设置图表的标题，包括文本、字体、对齐方式等。 - `legend`: 图例组件，用于控制图表中不同系列的...
echart 实例
11-16
总结，ECharts是一个强大且灵活的JavaScript可视化库，通过掌握其基本使用、图表类型、数据格式、配置项设置和交互功能，可以创建出各种各样的数据可视化应用。在实际项目中，结合具体的业务需求和数据特点，你可以...
echart各种酷炫图表,柱状图,折线图,仪表盘,雷达图.zip
12-12
7. **自定义样式**：ECharts 允许开发者通过配置项自由调整图表的样式，包括颜色、字体、边框等，甚至可以自定义图表的每一个细节，满足个性化需求。 8. **数据加载和更新**：ECharts 支持动态数据加载和实时数据...
echarts 网格属性_echarts 绘制网格 教你使用graphic
weixin_39715907的博客
12-19 1437
echarts 绘制网格 教你使用graphic主子镇楼不经常使用的echarts的同学对于echarts 的认识基本停留在饼图，柱形图，条形图，折线图等一系列常规图形上，对于网格基本是一脸懵，小伙伴会问了网格不都是用canvas或者svg话的吗？ 这一类不特殊图标一般都是D3定制的(不了解D3的小伙伴请移步：D3.js官网)就不多解释了！我们一般不会为了一个图，而引用一个插件或者图库，代价太大，...
Echarts -- graphic 实现自定义图片/文字
Le_12345679的博客
01-11 7391
1.graphic 组件相关配置参考：ECharts图形元素组件（graphic）_w3cschool 2. graphic 是与 series 同级别的对象，参考如下： series: [{ // ...... }], graphic: [{ type: 'group',// 组（可以包含图形、文字、图片） left: 0, top: 'bottom', children: [{ type: 'rect', ..
ECharts实现立体柱形图
weixin_61569821的博客
11-03 1839
ECharts快速实现立体柱形图！
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心）
苦瓜_小学生的博客
04-25 1498
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心） 给图表添加自定义文字 给图表添加自定义图片
【饼图交通方式】用ECharts的graphic配置打造个性化
最新发布
No_Name_Cao_Ni_Mei的博客
07-04 445
通过ECharts的graphic配置，我们可以在图表中加入各种自定义图形元素，这不仅能够提升图表的美观度，还能增强信息的传达效果。本文通过一个具体的示例，展示了如何在饼图中添加中心图像，但这只是graphic能力的冰山一角。ECharts提供了更多种类的图形元素和配置选项，等待你去探索和实践。
echart配置项翻译文档
03-21
它提供了丰富的配置项，可以通过配置项来定义图表的样式、数据、交互行为等。以下是 ECharts 配置项的翻译文档： 1. title（标题）：用于设置图表的标题，可以设置主标题和副标题，包括文本内容、位置、字体样式等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值