前端开发--Echarts相关配置详解

#博学谷IT学习技术支持#

目录

前期准备

 tooltip  提示框组件相关配置

trigger 提示框触发类型

formatter   提示框内容     

提示框样式

position  提示框位置设置

toolbox 工具栏组件

color  图形颜色

legend 图例

xAxis X轴相关属性（与Y轴一致）

xAxis.axisLine. show = true 是否显示坐标轴轴线 

xAxis.axisTick. show = true 是否显示坐标轴刻度

xAxis. boundaryGap 坐标轴左右两侧是否留白

xAxis. splitLine 坐标轴在 grid 区域中的分隔线

series 

series-pie. hoverAnimation 是否开启在扇区上的放大动画效果

series-pie. hoverOffset 鼠标经过是否放大图形

series-radar.data. symbol 标记点（拐点形状）

series-line. smooth 是否平滑曲线显示

series-pie. labelLine 标签视觉引导线

series-pie. avoidLabelOverlap 是否启用防止标签重叠

series-pie.data.itemStyle. color 在data中修改单个图形数据的颜色

series-pie. startAngle = 90 起始角度 用于图像旋转

---

前期准备

• 下载echarts GitHub - apache/echarts at 4.5.0

• Echarts官网下载地址：下载 - Apache ECharts

• 引入echarts dist/echarts.min.js

• 准备一个具备大小的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

• 初始化echarts实例对象

  var myChart = echarts.init(document.getElementById('main'));

• 指定配置项和数据(option)（在官网选择想要的图表，将配置项复制修改）

  var myChart = echarts.init(document.querySelector(".pie"));
    // 2. 指定配置项和数据
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
  
      series: [
        {
          name: "面积模式",
          type: "pie",
          radius: [30, 110],
          center: ["75%", "50%"],
          roseType: "area",
          data: [
            { value: 10, name: "rose1" },
            { value: 5, name: "rose2" },
            { value: 15, name: "rose3" },
            { value: 25, name: "rose4" },
            { value: 20, name: "rose5" },
            { value: 35, name: "rose6" },
            { value: 30, name: "rose7" },
            { value: 40, name: "rose8" }
          ]
        }
      ]
    };
  
    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
  })();
  

• 将配置项设置给echarts实例对象

  myChart.setOption(option);

  相关参数说明

 tooltip  提示框组件相关配置

  trigger 提示框触发类型

• 'item'

  item的意思是放到数据对应图形上触发提示框显示

  option = {
    tooltip: {
      trigger: "item"
    },
  }

• 'axis'

  只要经过坐标轴就显示提示框

• option = {
    tooltip: {
      trigger: "axis"
    },
  }

• 'none'

  什么都不触发。

 formatter   提示框内容     

 //格式
 formatter: "{a} <br/>{b} : {c} ({d}%)"

option = {
    // 提示框组件
    tooltip: {
      // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      // 格式化提示内容：
      // a 代表series系列图表名称  
      // b 代表series数据名称 data 里面的name    
      // c 代表series数据值 data 里面的value   
      // d代表  当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 控制图表
    series: [
      {
        // 图表名称
        name: '点位统计',
        type: 'pie',
        radius: ['10%', '70%'],
        center: ['50%', '50%'],
        roseType: 'radius',
        // 数据集 value 数据的值 name 数据的名称
        data: [
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};

提示框样式

 borderColor 提示框浮层的背景颜色

 borderColor  提示框的边框颜色

 borderWidth 提示框的边框宽

 color  文字的颜色borderColor  

 position  提示框位置设置

提示框浮层的位置，默认不设置时位置会跟随鼠标的位置

// 绝对位置，相对于容器左侧 10px, 上侧 10 px
  position: [10, 10]
  // 相对位置，放置在容器正中间
  position: ['50%', '50%']

toolbox 工具栏组件

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

 color  图形颜色

即可以使用数组形式分别指定，也可以使用一个颜色统一指定

 使用渐变色设置格式

// 修改线性渐变色方式 1
color: new echarts.graphic.LinearGradient(
     // (x1,y2) 点到点 (x2,y2) 之间进行渐变
     0, 0, 0, 1,
     [
          { offset: 0, color: '#00fffb' }, // 0 起始颜色
          { offset: 1, color: '#0061ce' }  // 1 结束颜色
    ]
 ),
// 修改线性渐变色方式 2
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
},

legend 图例

图例位置、样式等

xAxis X轴相关属性（与Y轴一致）

xAxis.axisLine. show = true 是否显示坐标轴轴线 

xAxis.axisTick. show = true 是否显示坐标轴刻度

xAxis. boundaryGap 坐标轴左右两侧是否留白

xAxis. splitLine 坐标轴在 grid 区域中的分隔线

series series

series-pie. hoverAnimation 是否开启在扇区上的放大动画效果

series-pie. hoverOffset 鼠标经过是否放大图形

series-radar.data. symbol 标记点（拐点形状）

series-line. smooth 是否平滑曲线显示

series-pie. labelLine 标签视觉引导线

series-pie. avoidLabelOverlap 是否启用防止标签重叠

series-pie.data.itemStyle. color 在data中修改单个图形数据的颜色

series-pie. startAngle = 90 起始角度 用于图像旋转