Echarts -- graphic 实现自定义图片/文字

1. graphic 组件相关配置参考:ECharts图形元素组件(graphic)_w3cschool

2. graphic 是与 series 同级别的对象,参考如下:

 

series: [{
    // ......
}],
graphic: [{
    type: 'group',// 组(可以包含图形、文字、图片)
    left: 0,
    top: 'bottom',
    children: [{
            type: 'rect',
            z: 100,
            left: '0',
            top: '0',
            shape: {
                width: 180,
                height: 100
            },
            style: {
                fill: '#f6f6f6',
            }
        },
        {
            type: 'image',// 图片
              left:10,
              top: 10,
              z: 100,
              bounding: 'raw',
              style: {
                  image: '/static/UserSys/product/cadre/Report/img/country.png',
                  width: 20,
                  height: 20,
              }
          },
          {
            type: 'text',// 文字
            z: 100,
            left: 45,
            top: 13,
            style: {
                fill: '#e46c11',
                text: '全球分布      ' + countryCounts + ' 国',
                font: '14px Microsoft YaHei'
            }
        },
        {
            type: 'image',
              left:10,
              top: 40,
              z: 100,
              bounding: 'raw',
              style: {
                  image: '/static/UserSys/product/cadre/Report/img/china.png',
                  width: 20,
                  height: 20,
              }
          },
          {
            type: 'text',
            z: 100,
            left: 45,
            top: 43,
            style: {
                fill: '#e46c11',
                text: '中籍员工  ' + chinaNaticeCount + ' 人',
                font: '14px Microsoft YaHei'
            }
        },
        {
            type: 'image',
              left:10,
              top: 70,
              z: 100,
              bounding: 'raw',
              style: {
                  image: '/static/UserSys/product/cadre/Report/img/global.png',
                  width: 20,
                  height: 20,
              }
          },
          {
            type: 'text',
            z: 100,
            left: 45,
            top: 73,
            style: {
                fill: '#e46c11',
                text: '外籍员工  ' + foreignNativeCount + ' 人',
                font: '14px Microsoft YaHei'
            }
        },
    ]
}]

  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ECharts 是一个基于 JavaScript 的开源可视化库,支持多种类型的图表,包括 3D 柱形图。而 Liquidfill 则是 ECharts 中的一个插件,可以用来创建水球图,即圆形的图表,同时支持动画效果。 要创建一个 3D 柱形图,需要在 ECharts 中引入 echarts-gl(ECharts 的 WebGL 渲染扩展库)和 echarts-liquidfill 插件。代码示例: ```js // 引入所需的模块 import * as echarts from 'echarts'; import 'echarts-gl'; import 'echarts-liquidfill'; // 初始化 ECharts 实例 const chart = echarts.init(document.getElementById('chart')); // 定义数据 const data = [ { name: 'A', value: [0, 0, 5] }, { name: 'B', value: [1, 0, 6] }, { name: 'C', value: [2, 0, 8] }, { name: 'D', value: [0, 1, 7] }, { name: 'E', value: [1, 1, 2] }, { name: 'F', value: [2, 1, 9] }, { name: 'G', value: [0, 2, 3] }, { name: 'H', value: [1, 2, 1] }, { name: 'I', value: [2, 2, 4] }, ]; // 定义配置项 const option = { grid3D: {}, xAxis3D: { type: 'category', data: ['X', 'Y', 'Z'], }, yAxis3D: { type: 'category', data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'], }, zAxis3D: {}, series: [{ type: 'bar3D', data: data.map(item => ({ value: item.value.concat(item.value[2]), itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00aaff', }, { offset: 1, color: '#00ffaa', }]), }, })), shading: 'color', barSize: 1, opacity: 0.8, }, { type: 'liquidFill', data: data.map(item => ({ value: item.value[2] / 10, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00aaff', }, { offset: 1, color: '#00ffaa', }]), }, })), shape: 'circle', label: { show: true, fontSize: 16, color: '#fff', formatter: '{b}', }, }], }; // 使用配置项生成图表 chart.setOption(option); ``` 上述代码中,`data` 数组定义了每个柱形图的名称和坐标位置,`option` 对象则定义了图表的配置项。其中,`grid3D`、`xAxis3D`、`yAxis3D` 和 `zAxis3D` 用于定义 3D 坐标系,`series` 则用于定义 3D 柱形图和水球图。柱形图的样式可以通过 `itemStyle` 属性进行设置,而水球图则可以通过 `liquidFill` 类型的系列来创建。 最后,使用 `setOption` 方法将配置项传入,即可在页面中生成 3D 柱形图。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值