菜单 搜索
首页 前端知识 Echarts 设置(title,axis,series含富文本,tooltip,visualMap...)

Echarts 设置(title,axis,series含富文本,tooltip,visualMap...)

2024-02-02 09:02:04 前端知识 前端哥 912 549 我要收藏

目录

引言

一、标题 title / 副标题

二、坐标轴（以 y 轴为例）

三、series 系列（数据配置）

四、锦上添花（legend，tooltip，grid，visualMap）

4.1 图例 legend

4.2 提示框tooltip

4.3 网格 grid

4.4 视觉映射

五、图表实战

5.1  横向柱状图

5.2  双向柱状图

引言

        最近做 Dashboard大屏展示，用到了 echarts / echarts-for-react，官网文档的参考手册用过的都知道那叫一个不方便，本文整理了开发中常用的一些接口属性，有啥遗漏的地方后续会继续补充。

一、标题 title / 副标题

    title: {
        text: 'Echarts ',  // 主标题名称
        link: 'https://echarts.apache.org/examples/zh/index.html', // 点击主标题跳转
 
        textStyle: {                  //主标题文本设置
          color: '#C28D21',           //颜色
          fontSize: 20,               //大小
          fontStyle: 'oblique',       //斜体
          fontWeight: '700',          //粗体
          fontFamily: 'monospace',    //字体
          textBorderColor: "#000",    //描边
          textBorderWidth: '1',       //描边的宽度
          textShadowColor: '#8c8c8c', //阴影颜色
          textShadowBlur: '5',        //阴影的宽度
          textShadowOffsetX: '-10',   //阴影向X偏移
          textShadowOffsetY: '30',    //阴影向Y偏移
        },
 
      
        subtext: '百度',     //副标题名称 
        sublink: 'http://www.baidu.com', //副标题超链接
        subtextStyle: {//副标题的属性
          color: '#fff',
          // 其他属性类比主标题
        },
        
     
        itemGap: 3,     //主副标题间距
        x: 'center',    //主副标题的水平位置
        y: 'top',       //主副标题的垂直位置
        padding: [20, 20, 0, 20],,    //标题内边距：上右下左
        backgroundColor: '#ccc',//背景颜色；
        borderColor: '#000',    //边框的颜色
        borderWidth: 5,         //标签线框
        borderRadius: 10,       //边框切圆角
        shadowBlur: 10,         //阴影模糊大小.
        shadowColor: '#d9d9d9',    //阴影颜色
        shadowOffsetX: '40',    //阴影水平方向上的偏移距离
        shadowOffsetY: '30',    //阴影垂直方向上的偏移距离
        textAlign: 'auto',        //整体（包括 text 和 subtext）的水平对齐
        textVerticalAlign: 'auto',//整体（包括 text 和 subtext）的垂直对齐
        }
复制

二、坐标轴（以 y 轴为例）

      yAxis: [{
        name: 'Online(vehicles)',      // y轴名称（含义/单位）
        nameLocation: 'end', // 坐标轴名称显示位置。('start''center''end') 
        nameTextStyle:{                // 名称样式
          color:"#65ABE7",   // 蓝绿色
          color: '#8c8c8c',  // 会覆盖上面的颜色
          fontSize:12,  
      },
    // nameGap: 15, // 坐标轴名称与轴线之间的距离。
    // nameRotate: 0, // 坐标轴名字旋转，角度值。
    // inverse: false, // 是否是反向坐标轴。
    // offset: 0, // 轴相对于默认位置的偏移，在相同的 position 上有多个 Y 轴的时候有用。
    // gridIndex: 0 , // 轴所在的 grid 的索引，默认位于第一个 grid。(一般用于多个Y轴时)
    // triggerEvent: false , // 坐标轴的标签是否响应和触发鼠标事件，默认不响应。
    // zlevel: 0 , 
    // z: 0 , //z值小的图形会被z大的图形覆盖，z相比zlevel优先级低，且不会创建新的Canvas。
 
        type: 'value',       // 数值轴（动态）   若为 'category'   即类别轴  
        splitLine: {         // 当type：category时，该属性无效
          show: false        //  隐藏grid网格线
        },
        axisLine: {          // 轴线样式 
          show: true,   
          lineStyle: { color: '#d9d9d9', width: 2 }
        },
        axisTick: {
          show: false  // 此处无效，  需 type: 'category'  
        },
        axisLabel: {         // 轴刻度标签（数值样式设置）
          // inside: true,      // 各数值显示在 柱状图内部
          color: '#8c8c8c'
        },
         data: [120, 132, 101, 134, 90, 230, 210]
      },
      {                        // 双y轴 配置类似上面
        show: false,
        name: 'Rate',
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,   
          lineStyle: { color: '#d9d9d9', width: 2 }
        },
        axisLabel: {
          // inside: true,
          color: '#8c8c8c'
        },
 
        // data: 数据部分在series 中设置，
        // 当type：category时，此处须设置类似： data: ['Mon', 'Tue', 'Wed', 'Thu','Sun']
      }],
复制

三、series 系列（数据配置）

      series: [  
        {
          name: 'Today',   // 该组数据的名称 默认会出现在提示框tooltip中 
          type: 'line',    // 设置折线图类型  也可 bar pie heatmap...
          smooth: true,    // 折线设置光滑属性
          data: [120, 132, 101, 134, 90], // 数值轴的数据
          itemStyle: {                    // 设置数据样式
            normal: {
              color: '#40a9ff',
              lineStyle: {
                width: 2,
                color: '#40a9ff'
              }
            }
          },
        },
        {           // 多组数据 比如多折现图
          smooth: true,
          name: 'Rate',
          type: 'line',
          stack: 'Total',
          data:  data: [2, 2, 2, 2, 2,]
          
          itemStyle: {
            normal: {
              color: '#40a9ff',  // 数据点颜色
              label: {           // 给各数值设置标签
                 show: true,
                 textStyle: {    // 标签文本样式
                    color: '#fff' //白色
                 }
               },
              lineStyle: {    // 线的样式
                width: 2,
                type: 'dotted',  //'dotted'虚线，默认'solid'实线
                color: '#40a9ff' 
              }
            }
          },
        },
      ]
复制

         为了丰富图、轴的表现形式，通常可以在 series 中设置富文本标签（label）加上 rich 属性实现，比如要实现饼图的某个类别 cityE 富文本化，呈现以下效果:

  series: [
    {
      type: 'pie',
      radius: '65%',  // 饼图占图表整个区域的比例
      center: ['50%', '50%'],  // 水平，垂直方向位置
      selectedMode: 'single',  // 表示是否支持多个类别选中  此处为单个
      data: [
        {
          value: 148,      // 富文本突出的某个数据
          name: 'CityE',   // 富文本突出的某个数据
 
          label: {            
            formatter: [   // 自定义内容样式
              '{title|{b}}{abg|}',
              '  {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
              '{hr|}',
              '  {Sunny|}{value|202}{rate|55.3%}',
              '  {Cloudy|}{value|142}{rate|38.9%}',
              '  {Showers|}{value|21}{rate|5.8%}'
            ].join('\n'),
            backgroundColor: '#eee',
            borderColor: '#777',
            borderWidth: 1,
            borderRadius: 4,
            rich: {        // 富文本各部分属性设置
              title: {
                color: '#eee',
                align: 'center'
              },
              abg: {
                backgroundColor: '#333',
                width: '100%',
                align: 'right',
                height: 25,
                borderRadius: [4, 4, 0, 0]
              },
              Sunny: {
                height: 30,
                align: 'left',
                backgroundColor: {
                  image: weatherIcons.Sunny
                }
              },
              Cloudy: {
                height: 30,
                align: 'left',
                backgroundColor: {
                  image: weatherIcons.Cloudy
                }
              },
              Showers: {
                height: 30,
                align: 'left',
                backgroundColor: {
                  image: weatherIcons.Showers
                }
              },
              weatherHead: {
                color: '#333',
                height: 24,
                align: 'left'
              },
              hr: {
                borderColor: '#777',
                width: '100%',
                borderWidth: 0.5,
                height: 0
              },
              value: {
                color: '#333',
                width: 20,
                padding: [0, 20, 0, 45],
                align: 'center'
              },
              valueHead: {
                color: '#333',
                width: 20,
                padding: [0, 20, 0, 30],
                align: 'center'
              },
              rate: {
                color: '#333',
                width: 40,
                align: 'right',
                padding: [0, 10, 0, 0]
              },
              rateHead: {
                color: '#333',
                width: 40,
                align: 'center',
                padding: [0, 10, 0, 0]
              }
            }
          }
        },
        { value: 75, name: 'CityC' },
        { value: 10, name: 'CityD' },
        { value: 34, name: 'CityB' },
        { value: 5, name: 'CityA' }
      ],
    // 以下不是富文本的内容 一般用于鼠标 滑过/点击 饼图时出现强调效果
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
 
复制

四、锦上添花（legend，tooltip，grid，visualMap）

4.1 图例 legend

      legend: {
        data: ['Today', 'Yesterday'],  
        x: 'right',       // 调整水平位置
        y: 'center',      // 调整垂直位置   
        padding: [0, 50, 50, 0],  // 设置内边距
        orient: 'vertical',       // 竖直排列方向
        icon:'circle'             // 设置图例形状
      },
复制

4.2 提示框tooltip

      tooltip: {
        trigger: 'axis',   // 触发条件:'axis'多用于 bar line，'item'数据项触发
        axisPointer: {     // 坐标轴指示
          type: 'shadow'   // 鼠标悬浮到图上，显示阴影。
        },
 
        formatter: '{a} : {c}',  // 提示信息:{a}（系列名）{b}（类目值）{c}（数值）
 
        // formatter 可传入自定义函数
        formatter: function (params) {
          let s = ''
          params.forEach(item => {
            s += item.name + "</br>" + item.marker + item.seriesName + ':' + item.value
          })
          return s
        }
 
        
      },
复制

4.3 网格 grid

      grid: {
          top: 50,   // 设置图表位置
          bottom: 50,
          left: '45%',
 
          width: '35%' // 设置图表宽度
          containLabel: true  // 隐藏坐标轴
      },
复制

4.4 视觉映射

      visualMap: {
        min: 0,     // 设置数值范围
        max: 10,
        
        inRange: {
          color: ['#e6f7ff', '#bae7ff', '#91d5ff', '#69c0ff']  // 设置颜色类别
        }
复制

五、图表实战

5.1  横向柱状图

        

 
  const getBar = () => {
    let option = {
      title: {
        text: 'Today Top Packages',
        padding: [20, 20, 0, 20],
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: '{a} : {c}',
      },
      grid: {
        left: '3%',
        right: '0',
        bottom: '2%',
        // containLabel: false  // 隐藏坐标轴
      },
      xAxis: {
        name: 'Running in Vehicles',
        type: 'value',
        boundaryGap: [0, 0.01],
        show: 'true',
        axisLine: {
          // "show": false  // 隐藏线
        },
        axisTick: {
          "show": false  // 隐藏刻度
        },
        splitLine: {
          "show": false // 隐藏刻度 grid 区域中的分隔线
        }
      },
      yAxis: {
        axisLabel: {
          margin: 1,
          padding: 3,
          inside: true,
          baseline: 'bottom',
          textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            // align: 'top',
            fontSize: 14,
            color: '#bfbfbf'
          }
        },
 
        type: 'category',
        data: ['aaa', 'sss', 'sda', 'ddew', 'ewedw', 'sd23', 'packages name(long)',],
        // data: bar[0],
        axisLine: {
          "show": false
        },
        axisTick: {
          "show": false
        },
 
      },
      series: [
        {
          barWidth: 10,
          name: 'Running in Vehicles',
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          // data: bar[1],
          data: [10, 52, 20, 34, 30, 38, 22],
 
          itemStyle: {
            normal: {
              barBorderRadius: [0, 25, 25, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#40a9ff" // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#40a9ff" // 60% 处的颜色
              },
              {
                offset: 1,
                color: "#01ccfe", // 100% 处的颜色
                barBorderRadius: [0, 25, 25, 0],
              }], false)
            }
          },
        },
      ]
    };
    return option
  }
 
        <ReactEcharts
          style={{ width: '40%', boxShadow: '0 0 10px #ccc', margin: '0 0 1% 1%', }}
          option={getBar()}
          notMerge={true}
          lazyUpdate={true}
        >
        </ReactEcharts>
复制

5.2  双向柱状图

  const getBars = (title, xr, yr, xl, yl, unit, t) => {
    let option = {
      title: {
        text: title,
        padding: [20, 0, 0, 20],
      },
      legend: {
        data: ['Download', 'Deploy'],
        y: 'bottom'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
          let s = ''
          params.forEach(item => {
            s += item.name + "</br>" + item.marker + item.seriesName + " " + t + ' : ' + item.value + unit
          })
          return s
        }
      },
      grid: [
        // 右图
        {
          top: 50,
          bottom: 50,
          left: '45%',
          width: '35%'
        },
        //左图
        {
          top: 50,
          bottom: 50,
          width: '35%'
        }],
      xAxis: [  //横向为x
        // 右图 部署
        {
          name: unit,
          position: 'bottom',
          type: 'value',
          min: 0,
          // max: 100,
          // splitNumber: 2,
 
          show: 'true',  // 若设置fale 下面三个无效
          axisLine: {
            show: true   //  不写默认false
          },
          splitLine: {
            show: false // 隐藏刻度 grid 区域中的分隔线 不写默认true
          }
        },
        // 左图
        {
          name: unit,
          gridIndex: 1,  // grid 的索引
          position: 'bottom',
          type: 'value',
          inverse: true,  // 反转显示
          min: 0,
          // max: 100,
          // splitNumber: 2
          show: 'true',  // 若设置fale 下面三个无效
          axisLine: {
            show: true   //  不写默认false
          },
          splitLine: {
            show: false // 隐藏刻度 grid 区域中的分隔线 不写默认true
          }
        }
      ],
      yAxis: [{
        // data:['a','b','c','d','e',],
        data: yr,
        type: 'category',
        position: 'right',
        show: true,
        axisLine: {
          show: true   //  不写默认false
        },
        axisTick: {
          show: false,  // 隐藏刻度  默认为true
        },
      },
      {
        // data:['aa','ba','ca','ad','ea',],
        data: yl,
        gridIndex: 1,
        type: 'category',
        show: true,  // 因为共用y轴，此处写默认为true
        axisLine: {
          show: true   //  不写默认false
        },
        axisTick: {
          show: false,
        },
      }
      ],
      series: [{
        name: 'Deploy',
        type: 'bar',
        label: {
          normal: {
            // show: true,
            // position: 'right'  //控制显示位置  不写默认inside
          }
        },
        itemStyle: { color: '#1890ff' },
        // data: [16, 66, 37, 53, 20, 84,],
        data: xr
      },
      {
        name: 'Download',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        // stack: '总量',
        label: {
          normal: {
            // show: true
          }
        },
        itemStyle: { color: '#b5f5ec' },
        // data: [12, 45, 100, 65, 20, 69],
        data: xl
      }
      ]
    };
    return option
  }
 
            <ReactEcharts
              style={{ width: '100%' }}
              option={
                // getBars('Top AVG-Time')
                getBars('Top AVG-Time', bar2[0]?.[1], bar2[0]?.[0], bar2[1]?.[1], bar2[1]?.[0], 'min', 'Time')
              }
              notMerge={true}
              lazyUpdate={true}
            >
            </ReactEcharts>
//  筛选框用定位处理
            <span style={{ position: 'absolute', right: '1px', top: '1px' }}>
              <div>
                <Select defaultValue={times2} style={{ width: 80 }} bordered={false}
                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  onChange={(value) => {
                    setTimes2(value);
 
                  }}
                >
                  <Option value="day"  >&nbsp;Day &nbsp;</Option>
                  <Option value="week">Week</Option>
                </Select>
              </div>
            </span>
 
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/1128.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

借用jQuery发送Http请求的实现（内附源码）

2024-02-15 14:02:07

jQuery ---- 插件

2024-02-15 14:02:06

Python入门自学进阶-Web框架——16、Django登录/注册

2024-02-15 14:02:03

html5 简单实用好看的滑动开关Jquery css带效果图（无bug）

2024-02-15 14:02:00

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

Jquery锚点导航定位、css设置头部左侧固定，右侧内容滚动

2024-02-15 14:02:58

web前端JQuery当鼠标浏览到对应的地方盒子颜色相对改变

2024-02-15 14:02:58

原生JavaScript技术，jQuery实现下拉菜单

2024-02-15 14:02:52

在vue3项目中如何使用echarts

2024-02-15 14:02:45

BI可视化报表工具-SpringReport

2024-02-15 14:02:34

广告位招租：QQ85750956
大家推荐的文章
1

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
2

移动端css布局大全

2024-02-06 15:02:421000
3

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
4

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
5

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
6

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
7

尚硅谷css3笔记

2024-02-13 10:02:44998
8

如何利用浏览器测试跨域

2024-02-11 10:02:28998
9

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
10

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！