echarts基本配置

小乔FEer

已于 2024-07-24 10:13:41 修改

阅读量44

点赞数 1

文章标签： echarts 前端 javascript

于 2024-07-24 09:55:30 首次发布

本文链接：https://blog.csdn.net/oucqsy/article/details/140654438

版权

grid

grid: {
      left: 16,
      top: 48,
      right: 16,
      bottom: 16,
      containLabel: true
    },

tooltip超出区域被遮挡，设置appendTo

tooltip: {
      show: true,
      appendToBody: true,
      appendTo: true,
      nameFormat: 'none',
      valueFormat: 'none',
      textStyle: {
        fontFamily: 'Microsoft YaHei',
        color: '#fff',
        fontSize: 12
      },
      borderWidth: 0,
      backgroundColor: 'rgba(0,0,0, 0.65)',
      formatter: type === 'horizontalBar' ? '{b}: {c1}' : '{b}: {c}',
    },

空数据提示，图片和文本

 graphic: [{
      type: 'group',
      left: 'center',
      top: 'middle',
      silent: true,
      children: [{
        type: 'image',
        invisible: data && data.length > 0,
        style: {
          image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjJweCIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSIwIDAgNjIgNDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSIwIDAgNDcgMCA0NyAzNCAwIDM0Ij48L3BvbHlnb24+PC9kZWZzPjxnIGlkPSJlbXB0eSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxOS4wMDAwMDAsIC0xNTMwLjAwMDAwMCkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LjAwMDAwMCwgMTA4Ni4wMDAwMDApIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzguMTMwNzE1LCAzNDMuMDAwMDAwKSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYuODY5Mjg1LCAxMDEuMDAwMDAwKSI+PGVsbGlwc2UgZmlsbD0iI0Y1RjVGNSIgY3g9IjMxIiBjeT0iMzEiIHJ4PSIzMSIgcnk9IjEwIj48L2VsbGlwc2U+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOC4wMDAwMDAsIDAuMDAwMDAwKSI+PG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+PC9tYXNrPjxnIGlkPSJDbGlwLTIiPjwvZz48cGF0aCBkPSJNMiwxMi42MTQ1MTcxIEw1LjgwOTE4MzIxLDIuODU3MTQyODYgTDguNDA3NDkxMDMsMi4xMjc3NTUxNiBMMzguOTg3OTQzNSwyLjEyNzc1NTE2IEw0MS4yODUxMTcsNC40MTk2ODY5IEw0NC40NzM4MzczLDEzIEMzOC4wMDkyNzk4LDEyLjc5MjM3OSAzMy44NDIxMTg1LDEzLjEwMTA5MjMgMzEuOTcyMzUzNCwxMy45MjYxMzk4IEMzMC4zNTE0MTY2LDE0LjY0MTM5IDMwLjE5NjAzNTcsMTcuNDYxODI1MyAyOS4yNDE5NzQ4LDE4LjUgQzI3LjI5OTkwMjgsMjAuNjEzMjkyNyAyNS4yNTI4MTkxLDIxLjAxODMzMyAyMy4yMzY5MTg2LDIxIEMyMS41MzU2MTEyLDIwLjk4NDU1OTMgMTkuMDMzOTU0OCwyMC40MzM4NzAyIDE3LjE4NTUxMTYsMTguNSBDMTYuMDE2MDE2OSwxNy4yNzY0NTY0IDE1Ljc2NDY4MTgsMTQuNjc0NzUwOSAxNC4wNTQ5NjU2LDEzLjkyNjEzOTggQzExLjk5ODUxMzYsMTMuMDI1NzA4MSA3Ljk4MDE5MTc3LDEyLjU4ODUwMDUgMiwxMi42MTQ1MTcxIFoiIGZpbGw9IiNGRkZGRkYiIG1hc2s9InVybCgjbWFzay0yKSI+PC9wYXRoPjxwYXRoIGQ9Ik0yLDEzLjA0Njg4NzggQzcuNjgxMDQyNzIsMTMuNTA3MDk4MyAxMi4wMjA3OTM1LDEzLjc4OTMwNTIgMTUuMDE5MjUyNCwxMy44OTM1MDg1IEMxNS40NTY3NTEsMTMuOTA4NzEyNiAxNS4zNjk0OTE1LDE2LjI2MjQ3MTMgMTYuODYzNzI5OCwxOC4yNzk2NzY1IEMxOS40MjM2OTMyLDIxLjczNTU5ODcgMjQuMDI2Njc3OCwyNS4xODkxNDAzIDI1LjA3MTQwOTIsMjEuMzI4Mzc3IEMyNS4xMDI1MDE2LDIxLjIxMzQ3NjIgMjguNzE2ODE3NywxOC44NTUyMjM4IDI4Ljc0ODgzMzUsMTguNzMxNjEzNCBDMjkuNzYyNjY5NiwxNy4yMjIxMTExIDI5Ljk5OTMzNDgsMTQuODA1NDk5NSAzMi4wMTkwODMyLDEzLjg5MzUwODUgQzMzLjgwNjMxMDIsMTMuMDg2NTA5NiAzNy43OTk5NDkxLDEyLjgwNDMwMjYgNDQsMTMuMDQ2ODg3OCBMNDQsMzIgTDIsMzIgTDIsMTMuMDQ2ODg3OCBaIiBmaWxsPSIjRkFGQUZBIiBtYXNrPSJ1cmwoI21hc2stMikiPjwvcGF0aD48cGF0aCBkPSJNMzguMTEwNjM2LDIuODU3MTQyODYgTDguMDgyMTQ0MzcsMi44NTcxNDI4NiBDNy4xMDM1NjcyLDIuODU3MTQyODYgNi4yMDM1MDk0OCwzLjQxNTQzMDI0IDUuNzM4NjQ3MjksNC4zMTExMzM0NCBMNS42MDAyODczOSw0LjYxODQwMjQ0IEwyLjYxNzY0NzA2LDEyLjU0OTU2MzggTDE0LjgwOTEyMjksMTIuNTQ5NTYzOCBMMTQuODA2NDE4MiwxMi41ODI4NzQ3IEMxNS4yMDAyODMzLDEyLjQ5MzMxMzIgMTUuNjEyMzIwMiwxMi41OTM4NjEyIDE1LjkyNzMyNzcsMTIuODU2MjE3NiBDMTYuMjQxOTk3MiwxMy4xMTg0ODYxIDE2LjQyNjE2NzEsMTMuNTE0NzAxNCAxNi40MjgxOTU2LDEzLjkzNDIwNzkgQzE2LjQyODE5NTYsMTYuNDA3NTY1MiAxNy42OTY5MzEzLDE4LjY5MzA5ODEgMTkuNzU2ODYyNSwxOS45Mjk3MzI4IEMyMS44MTY3MDkxLDIxLjE2NjI3OTYgMjQuMzU0NjAzMSwyMS4xNjYyNzk2IDI2LjQxNDQ0OTcsMTkuOTI5NzMyOCBDMjguNDc0Mjk2MywxOC42OTMwOTgxIDI5Ljc0MzQ1NDYsMTYuNDA3NTY1MiAyOS43NDM0NTQ2LDEzLjkzNDIwNzkgQzI5Ljc0MjQ0MDQsMTMuMTkzNTQ1NSAzMC4zMDIzODgsMTIuNTgzNTc3OCAzMS4wMTM1NDI3LDEyLjU0OTU2MzggTDQzLjYxNzY0NzEsMTIuNTQ5NTYzOCBMNDAuNTg3MTY4Miw0LjYwNDY5MTM1IEM0MC4yMjc5NTY1LDMuNjYyNTgxMzkgMzkuNDAyODY4NCwyLjk5OTYxNTEzIDM4LjQzNTUzMjQsMi44NzYzOTExMiBMMzguMTEwNjM2LDIuODU3MTQyODYgWiBNMTMuOTA2OTc0NywxNC4zMDYxMjI0IEwyLDE0LjMwNjEyMjQgTDIsMjkuNTM2ODc4MiBDMiwzMC45NDA3NDgzIDIuOTk2MTc3NTEsMzIuMTIyNDMxOSA0LjMxNzc3Njg4LDMyLjI4NjUyMjkgTDQuNjI1MDM2NDUsMzIuMzA2MTIyNCBMNDEuMzc1Mjk2OCwzMi4zMDYxMjI0IEM0Mi43MDYwNjA2LDMyLjMwNTc3MDkgNDMuODI2MjA4NCwzMS4yNTQ4Njc4IDQzLjk4MTc1NDQsMjkuODYwNjY1NiBMNDQsMjkuNTM2ODc4MiBMNDQsMTQuMzA2MTIyNCBMMzIuMDkzMDI1MywxNC4zMDYxMjI0IEMzMS40Mzk4NDg4LDE5LjA3MzgxNCAyNy41NjY0NDU0LDIyLjYxMTc0NiAyMy4wMDAxMjUsMjIuNjExNzQ2IEMxOC40MzM1NTQ2LDIyLjYxMTc0NiAxNC41NjA0ODQ1LDE5LjA3MzgxNCAxMy45MDY5NzQ3LDE0LjMwNjEyMjQgTDEzLjkwNjk3NDcsMTQuMzA2MTIyNCBaIE0zNy40MTg1NzA4LDEgQzM5LjUxMzQ1NzksMSA0MS4zOTY0MDY5LDIuMjY5NTU5MjkgNDIuMTY5NDU4Miw0LjIwMzQ2NTg2IEw0NiwxMy43ODg2NDYxIEw0NiwyOC45MjMwNTIxIEM0NiwzMS43MjY4MyA0My43MTE4Mjk4LDM0IDQwLjg4OTE1MDIsMzQgTDUuMTExMTc0MiwzNCBDMi4yODg0OTQ2NywzNCAwLDMxLjcyNjgzIDAsMjguOTIzMDUyMSBMMCwxMy45ODk0MTY2IEwzLjg0MDkyMzgsNC4yMjg5MjQ3MiBDNC42MDcwODA4MywyLjI4MTQ4MzA2IDYuNDk3MDA1MTMsMSA4LjYwMjAzMDksMSBMMzcuNDE4NTcwOCwxIFoiIGZpbGw9IiNEREREREQiIG1hc2s9InVybCgjbWFzay0yKSI+PC9wYXRoPjwvZz48L2c+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg==',
        },
      }, {
        type: 'text',
        invisible: data && data.length > 0,
        top: 48,
        left: 6,
        style: {
          fill: '#666',
          text: '暂无数据',
        }
      }]
    }]

柱状图条形渐变，顶部圆角

'seriesStyle': {
      'barGap': '60%',
      'markLine': {
        'show': false,
        'label': {
          'show': true,
          'fontFamily': 'Microsoft YaHei',
          'fontSize': 12,
          'color': '#D3D3D3',
          'position': 'middle',
          'formatter': '请输入内容'
        },
        'lineStyle': {
          'type': 'dashed',
          'color': 'rgba(255,255,255,0.5)'
        },
        'symbol': [
          'none',
          'none'
        ],
        'type': 'average'
      },
      'barWidth': 10,
      'decorate': {
        'opacity': 1,
        'show': false,
        'type': 'l-highlightCircle',
        'color': 'auto',
        'offset': 'auto',
        'size': 'auto'
      },
      'highLightData': {
        'show': false,
        'type': 'max',
        'color': '#FF4038'
      },
      'label': {
        'show': true,
        'fontFamily': 'SourceHanSansCN',
        'color': '#D3D3D3',
        'align': 'right',
        'fontSize': 12,
        'textFormatter': 'Wan1',
        'position': ['465px', '-16px'],
        'textStyle': {
          'color': 'rgb(51, 118, 255)',
          'paddingBottom': 2,
        },
      },
      'showBackground': true,
      'backgroundStyle': {
        'color': 'rgb(243, 243, 243)'
      },
      'itemStyle': {
        'roundingTopBar': true,
        'plaid': {
          'show': false
        },
        normal: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            offset: 0,
            color: '#3376FF'
          }, {
            offset: 1,
            color: 'rgba(51,118,255,0.50)'
          }]),
          barBorderRadius: [0, 8, 8, 0]
        },
      },
    },