Echarts的常用名词

最新推荐文章于 2024-04-08 11:40:10 发布

Swguo_Study

最新推荐文章于 2024-04-08 11:40:10 发布

阅读量532

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_36122157/article/details/103241692

Echarts 专栏收录该内容

4 篇文章

订阅专栏

本文主要探讨Echarts中的一些常用属性，帮助理解并熟练运用Echarts进行数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

名词	描述
chart	是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
xAxis	直角坐标系中的横轴，通常并默认为类目型
yAxis	直角坐标系中的纵轴，通常并默认为数值型
grid	直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局
legend	图例，表述数据和图形的关联
dataRange	值域选择，常用于展现地域数据时选择值域范围
dataZoom	数据区域缩放，常用于展现大量数据时选择可视范围
roamController	缩放漫游组件，搭配地图使用
toolbox	辅助工具箱，辅助功能，如添加标线，框选缩放等
tooltip	气泡提示框，常用于展现更详细的数据
timeline	时间轴，常用于展现同一系列数据在时间维度上的多份数据
series	数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据

常用的属性


option = {
    tooltip:{ //提示框浮层
        // position:[10,10], //默认是在同一个地方的
        formatter:'{c}',  //{a} 系列名 series[0].name {b} 横坐标 {c} 纵坐标
        // backgroundColor:'blue', //背景颜色
    },
    legend:{
        data:['良率'] //图形顶部的标签 点击可显示隐藏整条线  必须与series[index]内的name同名
    },
    xAxis: {
      type: 'category', //xAxis轴类型
      data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '00:00', '02:00', '04:00', '06:00'],
      splitLine: { show: false },  //坐标轴中间的分割线 隐藏
      axisLabel: {
        color: '#79a5a5'
      },        //坐标轴刻度标签
      axisLine: { show: false },   //坐标轴轴线 隐藏
      axisTick: { show: false }    //坐标轴刻度 隐藏
    },
    yAxis: {
      type: 'value',
      name: '良率 (%)',   //y轴 名字
      nameTextStyle: {
        color: '#79a5a5'  //y轴 名字颜色
      },
      splitLine: { show: false }, 
      axisLabel: {
        color: '#79a5a5'
      },
      axisLine: { show: false },
      axisTick: { show: false },
      min: 0,
      max: 100,
    //   splitNumber:5 //分割段数
    },
    series: [{
      name:'良率',
      data: [90, 95, 90, 91, 96, 81, 91, 92, 78, 96, 91, 91],//数据
      type: 'line',
      symbol: 'pin', //数值点的形状
      symbolSize:8, //数值点的大小
      symbolRotate:180, //数值点的旋转角度
      showSymbol:true, //数值点的显示隐藏
      hoverAnimation:true, //数值点hover是否有动画
    //   stack:'',//可堆叠前面的数值到最后一项
      label: {
        normal: {
          show: true  //数值点的数据
        }
      },
      lineStyle: {
        color: '#c7e821'  //折线的样式  颜色
      },
      itemStyle: {
        color: ({ data }) => {
          if (data <= 80) { return '#ff0000 ' }    //不同点的颜色
          return '#c7e821'
        }
      },
      markLine: {   //划线
        symbol: 'none',   //取消最后的箭头
        data: [   
          [{
            value: 80,   //线的数值
            lineStyle: {  //线样式  颜色
              color: '#36dcdc'   
            },
            label: {    //线标签   
              color: '#000',  //颜色
              position: 'middle',  //位置
              formatter: '{c} %',   //格式
              backgroundColor: '#36dcdc',   //背景色
              padding: 5,  
              borderRadius: 5 
            },
            coord: ['08:00', 80]  //起点 [横坐标，数值]
          }, {
            coord: ['06:00', 80]//终点 [横坐标，数值]
          }]
        ]
      },
      areaStyle: {  //区域填充样式
        color: {  //颜色
          type: 'linear',  
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#505E0D' // 0% 处的颜色
          }, {
            offset: 1, color: '#171A14' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
    }]