echarts属性的设置（完整大全）转载

最新推荐文章于 2023-05-18 16:34:15 发布
最新推荐文章于 2023-05-18 16:34:15 发布
阅读量626 收藏 11
点赞数 1
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ht990711/article/details/121783640
版权
本文详细介绍了ECharts的配置项，包括图表标题、图例、值域、工具箱、提示框、区域缩放控制器、网格、坐标轴、柱形图、折线图、K线图、散点图、雷达图、饼图、地图、力导向图、弦图等的配置选项，涵盖了颜色、布局、样式、交互等多个方面，是理解和定制ECharts图表的重要参考资料。
摘要由CSDN通过智能技术生成

该文转载于：https://www.cnblogs.com/benmumu/p/8316652.html 

  // 全图默认背景
  //backgroundColor: 'rgba(0,0,0,0)',
  // 默认色板
  color: [ "#ff7f50", "#87cefa", "#da70d6", "#32cd32", "#6495ed", "#ff69b4", "#ba55d3", "#cd5c5c", "#ffa500", "#40e0d0", 
  "#1e90ff", "#ff6347", "#7b68ee", "#00fa9a", "#ffd700", "#6699FF", "#ff6666", "#3cb371", "#b8860b", "#30e0e0" ],

  // 图表标题
  title: {
    //水平安放位置,默认为左对齐,可选为:'center'¦'left'¦'right'¦{number}（x坐标，单位px）
    x: "left",
    // 垂直安放位置,默认为全图顶端,可选为：'top'¦'bottom'¦'center'¦{number}（y坐标，单位px）
    y: "top",
    //textAlign: null,          // 水平对齐方式，默认根据x设置自动调整
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#ccc", // 标题边框颜色
    borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
    padding: 5, // 标题内边距,单位px,默认各方向内边距为5,//接受数组分别设定上右下左边距，同css
    itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
    textStyle: {
      fontSize: 18,
      fontWeight: "bolder",
      color: "#333" // 主标题文字颜色
    },
    subtextStyle: {
      color: "#aaa" // 副标题文字颜色
    }
  },

  // 图例
  legend: {
    orient: "horizontal", // 布局方式，默认为水平布局，可选为： 'horizontal' ¦ 'vertical'
    // 水平安放位置,默认为全图居中,可选为：'center'¦'left'¦'right'¦{number}（x坐标，单位px）    
    x: "center", 
    // 垂直安放位置,默认为全图顶端,可选为：'top'¦'bottom'¦'center'¦{number}（y坐标，单位px）
    y: "top", 
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#ccc", // 图例边框颜色
    borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5, //图例内边距,单位px,默认各方向内边距为5，//接受数组分别设定上右下左边距，同css
    // 各个item之间的间隔，单位px，默认为10， //横向布局时为水平间隔，纵向布局时为纵向间隔    
    itemGap: 10, 
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14, // 图例图形高度
    textStyle: {
      color: "#333" // 图例文字颜色
    }
  },

  // 值域
  dataRange: {
    orient: "vertical",  // 布局方式，默认为垂直布局，可选为： 'horizontal' ¦ 'vertical'
    // 水平安放位置,默认为全图左对齐,可选为：'center'¦'left'¦'right'¦{number}（x坐标，单位px）    
    x: "left",  
    // 垂直安放位置,默认为全图底部,可选为：'top'¦'bottom'¦'center'¦{number}（y坐标，单位px） 
    y: "bottom",   
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#ccc",   // 值域边框颜色
    borderWidth: 0,   // 值域边框线宽，单位px，默认为0（无边框）
    padding: 5,   //值域内边距,单位px,默认各方向内边距为5，//接受数组分别设定上右下左边距,同css
    itemGap: 10, //各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔
    itemWidth: 20,   // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
    itemHeight: 14,   // 值域图形高度，线性渐变垂直布局高度为该值 * 10
    splitNumber: 5,    // 分割段数，默认为5，为0时为线性渐变
    color: ["#1e90ff", "#f0ffff"],   //颜色
    //text:['高','低'],    // 文本，默认为数值文本
    textStyle: {
      color: "#333"   // 值域文字颜色
    }
  },

  toolbox: {
    orient: "horizontal",  // 布局方式，默认为水平布局，可选为： 'horizontal' ¦ 'vertical'
    // 水平安放位置,默认为全图右对齐,可选为：'center'¦'left'¦'right'¦{number}（x坐标,单位px）   
    x: "right",  
    // 垂直安放位置,默认为全图顶端,可选为：'top'¦'bottom'¦'center'¦{number}（y坐标，单位px） 
    y: "top",   
    color: ["#1e90ff", "#22bb22", "#4b0082", "#d2691e"],
    backgroundColor: "rgba(0,0,0,0)",   // 工具箱背景颜色
    borderColor: "#ccc",   // 工具箱边框颜色
    borderWidth: 0,   // 工具箱边框线宽，单位px，默认为0（无边框）
    padding: 5,  //工具箱内边距,单位px,默认各方向内边距为5,//接受数组分别设定上右下左边距,同css
    // 各个item之间的间隔,单位px,默认为10, // 横向布局时为水平间隔,纵向布局时为纵向间隔    
    itemGap: 10,   
    itemSize: 16,   // 工具箱图形宽度
    featureImageIcon: {},   // 自定义图片icon
    featureTitle: {
      mark: "辅助线开关",
      markUndo: "删除辅助线",
      markClear: "清空辅助线",
      dataZoom: "区域缩放",
      dataZoomReset: "区域缩放后退",
      dataView: "数据视图",
      lineChart: "折线图切换",
      barChart: "柱形图切换",
      restore: "还原",
      saveAsImage: "保存为图片"
    }
  },

  // 提示框
  tooltip: {
    trigger: "item",   // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
    showDelay: 20,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    hideDelay: 100,   // 隐藏延迟，单位ms
    transitionDuration: 0.4,   // 动画变换时间，单位s
    backgroundColor: "rgba(0,0,0,0.7)",   // 提示背景颜色，默认为透明度为0.7的黑色
    borderColor: "#333",   // 提示边框颜色
    borderRadius: 4,   // 提示边框圆角，单位px，默认为4
    borderWidth: 0,   // 提示边框线宽，单位px，默认为0（无边框）
    padding: 5,   // 提示内边距，单位px，默认各方向内边距为5， // 接受数组分别设定上右下左边距，同css
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "line", // 默认为直线，可选为：'line' | 'shadow'
      lineStyle: {
        // 直线指示器样式设置
        color: "#48b",
        width: 2,
        type: "solid"
      },
      shadowStyle: {
        // 阴影指示器样式设置
        width: "auto", // 阴影大小
        color: "rgba(150,150,150,0.3)" // 阴影颜色
      }
    },
    textStyle: {
      color: "#fff"
    }
  },

  // 区域缩放控制器
  dataZoom: {
    orient: "horizontal", // 布局方式，默认为水平布局，可选为：
    // 'horizontal' ¦ 'vertical'
    // x: {number},              // 水平安放位置，默认为根据grid参数适配，可选为：
    // {number}（x坐标，单位px）
    // y: {number},              // 垂直安放位置，默认为根据grid参数适配，可选为：
    // {number}（y坐标，单位px）
    // width: {number},           // 指定宽度，横向布局时默认为根据grid参数适配
    // height: {number},          // 指定高度，纵向布局时默认为根据grid参数适配
    backgroundColor: "rgba(0,0,0,0)", // 背景颜色
    dataBackgroundColor: "#eee", // 数据背景颜色
    fillerColor: "rgba(144,197,237,0.2)", // 填充颜色
    handleColor: "rgba(70,130,180,0.8)" // 手柄颜色
  },

  // 网格
  grid: {
    x: 80,
    y: 60,
    x2: 80,
    y2: 60,
    // width: {totalWidth} - x - x2,
    // height: {totalHeight} - y - y2,
    backgroundColor: "rgba(0,0,0,0)",
    borderWidth: 1,
    borderColor: "#ccc"
  },

  // 类目轴
  categoryAxis: {
    position: "bottom", // 位置
    nameLocation: "end", // 坐标轴名字位置，支持'start' | 'end'
    boundaryGap: true, // 类目起始和结束两端空白策略
    axisLine: {
      // 坐标轴线
      show: true, // 默认显示，属性show控制显示与否
      lineStyle: {
        // 属性lineStyle控制线条样式
        color: "#48b",
        width: 2,
        type: "solid"
      }
    },
    axisTick: {
      // 坐标轴小标记
      show: true, // 属性show控制显示与否，默认不显示
      interval: "auto",
      // onGap: null,
      inside: false, // 控制小标记是否在grid里
      length: 5, // 属性length控制线长
      lineStyle: {
        // 属性lineStyle控制线条样式
        color: "#333",
        width: 1
      }
    },
    axisLabel: {
      // 坐标轴文本标签，详见axis.axisLabel
      show: true,
      interval: "auto",
      rotate: 0,
      margin: 8,
      // formatter: null,
      textStyle: {
        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        color: "#333"
      }
    },
    splitLine: {
      // 分隔线
      show: true, // 默认显示，属性show控制显示与否
      // onGap: null,
      lineStyle: {
        // 属性lineStyle（详见lineStyle）控制线条样式
        color: ["#ccc"],
        width: 1,
        type: "solid"
      }
    },
    splitArea: {
      // 分隔区域
      show: false, // 默认不显示，属性show控制显示与否
      // onGap: null,
      areaStyle: {
        // 属性areaStyle（详见areaStyle）控制区域样式
        color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
      }
    }
  },

  // 数值型坐标轴默认参数
  valueAxis: {
    position: "left", // 位置
    nameLocation: "end", // 坐标轴名字位置，支持'start' | 'end'
    nameTextStyle: {}, // 坐标轴文字样式，默认取全局样式
    boundaryGap: [0, 0], // 数值起始和结束两端空白策略
    splitNumber: 5, // 分割段数，默认为5
    axisLine: {
      // 坐标轴线
      show: true, // 默认显示，属性show控制显示与否
      lineStyle: {
        // 属性lineStyle控制线条样式
        color: "#48b",
        width: 2,
        type: "solid"
      }
    },
    axisTick: {
      // 坐标轴小标记
      show: false, // 属性show控制显示与否，默认不显示
      inside: false, // 控制小标记是否在grid里
      length: 5, // 属性length控制线长
      lineStyle: {
        // 属性lineStyle控制线条样式
        color: "#333",
        width: 1
      }
    },
    axisLabel: {
      // 坐标轴文本标签，详见axis.axisLabel
      show: true,
      rotate: 0,
      margin: 8,
      // formatter: null,
      textStyle: {
        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        color: "#333"
      }
    },
    splitLine: {
      // 分隔线
      show: true, // 默认显示，属性show控制显示与否
      lineStyle: {
        // 属性lineStyle（详见lineStyle）控制线条样式
        color: ["#ccc"],
        width: 1,
        type: "solid"
      }
    },
    splitArea: {
      // 分隔区域
      show: false, // 默认不显示，属性show控制显示与否
      areaStyle: {
        // 属性areaStyle（详见areaStyle）控制区域样式
        color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
      }
    }
  },

  polar: {
    center: ["50%", "50%"], // 默认全局居中
    radius: "75%",
    startAngle: 90,
    splitNumber: 5,
    name: {
      show: true,
      textStyle: {
        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        color: "#333"
      }
    },
    axisLine: {
      // 坐标轴线
      show: true, // 默认显示，属性show控制显示与否
      lineStyle: {
        // 属性lineStyle控制线条样式
        color: "#ccc",
        width: 1,
        type: "solid"
      }
    },
    axisLabel: {
      // 坐标轴文本标签，详见axis.axisLabel
      show: false,
      textStyle: {
        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        color: "#333"
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: "#ccc"
      }
    }
  },

  // 柱形图默认参数
  bar: {
    barMinHeight: 0, // 最小高度改为0
    // barWidth: null,        // 默认自适应
    barGap: "30%", // 柱间距离，默认为柱形宽度的30%，可设固定值
    barCategoryGap: "20%", // 类目间柱形距离，默认为类目间距的20%，可设固定值
    itemStyle: {
      normal: {
        // color: '各异',
        barBorderColor: "#fff", // 柱条边线
        barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
        barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
        label: {
          show: false
          // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
          // 'inside'|'left'|'right'|'top'|'bottom'
          // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
        }
      },
      emphasis: {
        // color: '各异',
        barBorderColor: "rgba(0,0,0,0)", // 柱条边线
        barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
        barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
        label: {
          show: false
          // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
          //           'inside'|'left'|'right'|'top'|'bottom'
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        }
      }
    }
  },

  // 折线图默认参数
  line: {
    itemStyle: {
      normal: {
        // color: 各异,
        label: {
          show: false
          // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
          //           'inside'|'left'|'right'|'top'|'bottom'
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        },
        lineStyle: {
          width: 2,
          type: "solid",
          shadowColor: "rgba(0,0,0,0)", //默认透明
          shadowBlur: 5,
          shadowOffsetX: 3,
          shadowOffsetY: 3
        }
      },
      emphasis: {
        // color: 各异,
        label: {
          show: false
          // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
          //           'inside'|'left'|'right'|'top'|'bottom'
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        }
      }
    },
    //smooth : false,
    //symbol: null,             // 拐点图形类型
    symbolSize: 2, // 拐点图形大小
    //symbolRotate : null,       // 拐点图形旋转控制
    showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
  },

  // K线图默认参数
  k: {
    // barWidth : null              // 默认自适应
    // barMaxWidth : null           // 默认自适应
    itemStyle: {
      normal: {
        color: "#fff", // 阳线填充颜色
        color0: "#00aa11", // 阴线填充颜色
        lineStyle: {
          width: 1,
          color: "#ff3200", // 阳线边框颜色
          color0: "#00aa11" // 阴线边框颜色
        }
      },
      emphasis: {
        // color: 各异,
        // color0: 各异
      }
    }
  },

  // 散点图默认参数
  scatter: {
    //symbol: null,         // 图形类型
    symbolSize: 4, // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    //symbolRotate : null,   // 图形旋转控制
    large: false, // 大规模散点图
    largeThreshold: 2000, // 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
    itemStyle: {
      normal: {
        // color: 各异,
        label: {
          show: false
          // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
          //           'inside'|'left'|'right'|'top'|'bottom'
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        }
      },
      emphasis: {
        // color: '各异'
        label: {
          show: false
          // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
          //           'inside'|'left'|'right'|'top'|'bottom'
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        }
      }
    }
  },

  // 雷达图默认参数
  radar: {
    itemStyle: {
      normal: {
        // color: 各异,
        label: {
          show: false
        },
        lineStyle: {
          width: 2,
          type: "solid"
        }
      },
      emphasis: {
        // color: 各异,
        label: {
          show: false
        }
      }
    },
    //symbol: null,          // 拐点图形类型
    symbolSize: 2 // 可计算特性参数，空数据拖拽提示图形大小
    //symbolRotate : null,    // 图形旋转控制
  },

  // 饼图默认参数
  pie: {
    center: ["50%", "50%"], // 默认全局居中
    radius: [0, "75%"],
    clockWise: false, // 默认逆时针
    startAngle: 90,
    minAngle: 0, // 最小角度改为0
    selectedOffset: 10, // 选中是扇区偏移量
    itemStyle: {
      normal: {
        // color: 各异,
        borderColor: "#fff",
        borderWidth: 1,
        label: {
          show: true,
          position: "outer"
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        },
        labelLine: {
          show: true,
          length: 20,
          lineStyle: {
            // color: 各异,
            width: 1,
            type: "solid"
          }
        }
      },
      emphasis: {
        // color: 各异,
        borderColor: "rgba(0,0,0,0)",
        borderWidth: 1,
        label: {
          show: false
          // position: 'outer'
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        },
        labelLine: {
          show: false,
          length: 20,
          lineStyle: {
            // color: 各异,
            width: 1,
            type: "solid"
          }
        }
      }
    }
  },

  map: {
    mapType: "china", // 各省的mapType暂时都用中文
    mapLocation: {
      x: "center",
      y: "center"
      // width    // 自适应
      // height   // 自适应
    },
    showLegendSymbol: true, // 显示图例颜色标识（系列标识的小圆点），存在legend时生效
    itemStyle: {
      normal: {
        // color: 各异,
        borderColor: "#fff",
        borderWidth: 1,
        areaStyle: {
          color: "#ccc" //rgba(135,206,250,0.8)
        },
        label: {
          show: false,
          textStyle: {
            color: "rgba(139,69,19,1)"
          }
        }
      },
      emphasis: {
        // 也是选中样式
        // color: 各异,
        borderColor: "rgba(0,0,0,0)",
        borderWidth: 1,
        areaStyle: {
          color: "rgba(255,215,0,0.8)"
        },
        label: {
          show: false,
          textStyle: {
            color: "rgba(139,69,19,1)"
          }
        }
      }
    }
  },

  force: {
    // 数据map到圆的半径的最小值和最大值
    minRadius: 10,
    maxRadius: 20,
    density: 1.0,
    attractiveness: 1.0,
    // 初始化的随机大小位置
    initSize: 300,
    // 向心力因子，越大向心力越大
    centripetal: 1,
    // 冷却因子
    coolDown: 0.99,
    // 分类里如果有样式会覆盖节点默认样式
    itemStyle: {
      normal: {
        // color: 各异,
        label: {
          show: false
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        },
        nodeStyle: {
          brushType: "both",
          color: "#f08c2e",
          strokeColor: "#5182ab"
        },
        linkStyle: {
          strokeColor: "#5182ab"
        }
      },
      emphasis: {
        // color: 各异,
        label: {
          show: false
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        },
        nodeStyle: {},
        linkStyle: {}
      }
    }
  },

  chord: {
    radius: ["65%", "75%"],
    center: ["50%", "50%"],
    padding: 2,
    sort: "none", // can be 'none', 'ascending', 'descending'
    sortSub: "none", // can be 'none', 'ascending', 'descending'
    startAngle: 90,
    clockWise: false,
    showScale: false,
    showScaleText: false,
    itemStyle: {
      normal: {
        label: {
          show: true
          // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
        },
        lineStyle: {
          width: 0,
          color: "#000"
        },
        chordStyle: {
          lineStyle: {
            width: 1,
            color: "#666"
          }
        }
      },
      emphasis: {
        lineStyle: {
          width: 0,
          color: "#000"
        },
        chordStyle: {
          lineStyle: {
            width: 2,
            color: "#333"
          }
        }
      }
    }
  },

  island: {
    r: 15,
    calculateStep: 0.1 // 滚轮可计算步长 0.1 = 10%
  },

  markPoint: {
    symbol: "pin", // 标注类型
    symbolSize: 10, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    //symbolRotate : null, // 标注旋转控制
    itemStyle: {
      normal: {
        // color: 各异，
        // borderColor: 各异,     // 标注边线颜色，优先于color
        borderWidth: 2, // 标注边线线宽，单位px，默认为1
        label: {
          show: true,
          position: "inside" // 可选为'left'|'right'|'top'|'bottom'
          // textStyle: null    // 默认使用全局文本样式，详见TEXTSTYLE
        }
      },
      emphasis: {
        // color: 各异
        label: {
          show: true
          // position: 'inside'    // 'left'|'right'|'top'|'bottom'
          // textStyle: null     // 默认使用全局文本样式，详见TEXTSTYLE
        }
      }
    }
  },

  markLine: {
    // 标线起始和结束的symbol介绍类型，如果都一样，可以直接传string
    symbol: ["circle", "arrow"],
    // 标线起始和结束的symbol大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    symbolSize: [2, 4],
    // 标线起始和结束的symbol旋转控制
    //symbolRotate : null,
    itemStyle: {
      normal: {
        // color: 各异,           // 标线主色，线色，symbol主色
        // borderColor: 随color,       // 标线symbol边框颜色，优先于color
        borderWidth: 2, // 标线symbol边框线宽，单位px，默认为2
        label: {
          show: false,
          // 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
          position: "inside",
          textStyle: {
            // 默认使用全局文本样式，详见TEXTSTYLE
            color: "#333"
          }
        },
        lineStyle: {
          // color: 随borderColor,    // 主色，线色，优先级高于borderColor和color
          // width: 随borderWidth,    // 优先于borderWidth
          type: "solid",
          shadowColor: "rgba(0,0,0,0)", //默认透明
          shadowBlur: 5,
          shadowOffsetX: 3,
          shadowOffsetY: 3
        }
      },
      emphasis: {
        // color: 各异
        label: {
          show: false
          // position: 'inside'   // 'left'|'right'|'top'|'bottom'
          // textStyle: null    // 默认使用全局文本样式，详见TEXTSTYLE
        },
        lineStyle: {}
      }
    }
  },

  textStyle: {
    decoration: "none",
    fontFamily: "Arial, Verdana, sans-serif",
    fontFamily2: "微软雅黑", // IE8- 字体模糊并且不支持不同字体混排，额外指定一份
    fontSize: 12,
    fontStyle: "normal",
    fontWeight: "normal"
  },

  // 默认标志图形类型列表
  symbolList: [
    "circle",
    "rectangle",
    "triangle",
    "diamond",
    "emptyCircle",
    "emptyRectangle",
    "emptyTriangle",
    "emptyDiamond"
  ],
  loadingText: "Loading...",
  // 可计算特性配置，孤岛，提示颜色
  calculable: false, // 默认关闭可计算特性
  calculableColor: "rgba(255,165,0,0.6)", // 拖拽提示边框颜色
  calculableHolderColor: "#ccc", // 可计算占位提示颜色
  nameConnector: " & ",
  valueConnector: " : ",
  animation: true,
  animationThreshold: 2500, // 动画元素阀值，产生的图形原素超过2500不出动画
  addDataAnimation: true, // 动态数据接口是否开启动画效果
  animationDuration: 2000,
  animationEasing: "ExponentialOut" //BounceOut
};

原文地址：https://www.cnblogs.com/benmumu/p/8316652.html

babySan
关注
echarts属性的设置（完整大全）
m0_70273331的博客
05-03 3694
// height: {number}, // 指定高度，纵向布局时默认为根据grid参数适配 backgroundColor: ‘rgba(0,0,0,0)’, // 背景颜色 dataBackgroundColor: ‘#eee’, // 数据背景颜色 fillerColor: ‘rgba(144,197,237,0.2)’, // 填充颜色 handleColor: ‘rgba(70,130,180,0.8)’ // 手柄颜色 }, [](()
echarts属性的设置（完整大全），如何学习web开发
最新发布
2401_84094725的博客
04-03 1598
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取is : {width : 0,},width : 2,自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
echarts属性的设置（完整大全一）工具箱
03-13
echarts属性的设置（完整大全一）工具箱。javascript写的各类echarts图 echarts属性的设置（完整大全一）工具箱。javascript写的各类echarts图
echarts属性大全
weixin_42277719的博客
09-22 488
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: [’#ff7f50’,’#87cefa’,’#da70d6’,’#32cd32’,’#6495ed’, ‘#ff69b4’,’#ba55d3’,’#cd5c5c’,’#ffa500’,’#40e0d0’, ‘#1e90ff’,’#ff6347’,’#7b68ee’,’#00fa9a’,’#ffd700’, ‘#6699FF’,’#ff6666’,’#3cb371’,’#b8860b’,
echarts折线图设置属性
oneorang的博客
08-07 790
var option = { backgroundColor: '#FFF0F5', title: { text: '折线图', subtext: '模拟数据', x: 'center' }, legend: { // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直） orient: 'horizontal', // x 设置水..
echarts 折线图 设置y轴最小刻度_零基础入门echarts图标
weixin_39656435的博客
11-20 1137
一、echarts简介1.1图表工具应用场景：网页工具：百度echarts highCharts学习：柱状图(条形图) 折线图 饼状图 地图 (数据交互)1.2 echarts点击下载1.下载echarts.js文件 官网下载 或者bootCDN下载2.写基本结构3.js代码1.3使用步骤引入ecahrts文件绘制简单的图表容器 准备一个具备大小(宽高)的 DOMjs配置 显示图表显示效果二、Ec...
echarts属性详解
weixin_30832143的博客
07-27 1164
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff63...
echarts 如何设置热力图点的大小
weixin_30949361的博客
08-16 2684
series: [{ name: 'AQI', type: 'heatmap', coordinateSystem: 'geo', blurSize: 10, pointSize: 10, // 设置热力图上点的大小 symbolSize: 200, item...
echarts 属性全动态设置 数据动态绑定
07-31
java实现对echarts 属性全动态设置 数据动态绑定。封装echarts 的绘图方法，使得js只需要getLine（data），getBar（data）等就可以绘制图形。echarts上的所有属性都可以在java中设置。
Echarts属性设置
qq_39507326的博客
11-21 383
Echarts制作图表
echarts基本属性大全
weixin_46518533的博客
07-06 9858
echarts基本属性大全 // 全图默认背景  //backgroundColor:"#fff000",        //设置背景颜色,注意是逗号 backgroundColor:“rgba(0,0,0,0.1)”,  // 第四个参数是设置透明度 // 图表标题 title: {  text:“图表标题”,  // 标题内容     x: ‘left’,        // 水平安放位置，默认为左对齐，可选为：                       // ‘center’ ¦ ‘left’ ¦ 
Echarts属性的设置（完整大全）
qiudechao1的博客
07-11 3194
官网：https://echarts.baidu.com/echarts2/doc/doc.html#Grid 代码记录如下： // 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba...
Echarts 属性配置表
weixin_42735973的博客
08-22 1270
theme = { // 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500'...
echarts属性设置详解
weixin_42409227的博客
05-18 1776
【代码】echarts属性设置详解。
【 echarts 属性详解】
qq_43142023的博客
04-11 6768
数据系列，包括折线图、柱状图、散点图、饼图等，可以设置系列的类型、数据、样式和标注等属性。图例组件，用于展示数据系列的标识和名称，支持点击切换系列的显示状态。: 网格组件右侧位置，同样可以设置为像素值、百分比或预设的字符串值。: 网格组件顶部位置，同样可以设置为像素值、百分比或预设的字符串值。:网格组件底部位置，同样可以设置为像素值、百分比或预设的字符串值。: 网格组件左侧位置，可以设置为像素值、百分比或预设的字符串值。: 网格的边框颜色，可以设置为颜色值。: 网格的边框宽度，可以设置为像素值。
echarts标题（title）配置
aofeibian3056的博客
08-29 353
var option = { //标题 title : { show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏） text: '主标题',//主标题文本，'\n'指定换行 link:'',//主标题文本超链接,默认值true...
echarts属性的设置(完整大全一)
09-05
ECharts是一个强大的可视化开源库，它能够帮助我们简单而高效地创建各种交互式的图表。在ECharts中，我们可以通过设置属性来定制图表的样式和行为。 首先，ECharts提供了一系列常规属性的设置。比如说，我们可以设置图表的整体尺寸、位置以及背景颜色等。通过设置这些属性，我们可以调整图表的布局和外观，使其适应我们的需求。 其次，ECharts还提供了一系列数据属性的设置。通过设置这些属性，我们可以导入数据，并将其与图表进行关联。我们可以设置数据的格式、类型以及维度等，以确保数据能够正确地显示在图表中。 此外，ECharts还允许我们设置样式属性。通过设置样式属性，我们可以调整图表中元素的颜色、大小和形状等。这样，我们可以根据需要突出显示某些数据或调整元素的显示效果。 除了常规属性、数据属性和样式属性，ECharts还提供了一系列交互属性的设置。通过设置这些属性，我们可以为图表添加交互功能，比如缩放、平移和选择等。这样，用户可以通过与图表进行交互来深入了解数据，并进行更多的探索和分析。 最后，ECharts还提供了一些其他属性的设置，比如动画属性、事件属性和图例属性等。这些属性可以帮助我们为图表添加动画效果、定义图表的事件响应以及设置图例的显示方式等。 总的来说，ECharts提供了一整套属性的设置，通过设置这些属性，我们可以完全定制化地创建各种类型的图表。无论是简单的柱状图还是复杂的散点图，ECharts都能提供强大的功能和灵活的属性设置，满足我们的各种需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值