通用配置
1.设置背景图
option = {
graphic: [
{
type: 'image', // 图形元素类型
id: 'bg', // 更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
right: 'center', // 根据父元素进行定位 (居中)
top: '10%',
left: '12%',
bottom: '0%', // 根据父元素进行定位 (0%), 如果bottom的值是 0,也可以删除该bottom属性值。
z: 0, // 层叠
bounding: 'all', // 决定此图形元素在定位时,对自身的包围盒计算方式
style: {
image: bgImg,
width: elBgW,
height: elBgH
},
position: [0, 0] // 设置图片位置
}
],
}
2.设置纹理图
// 纹理填充
{
image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
3.X轴配置
xAxis: [
{
type: 'category', //坐标轴类型:'value' 数值轴,适用于连续数据;'category' 类目轴,适用于离散的类目数据
boundaryGap: false, //设置为false代表从X轴零刻度开始绘制,设置为true代表离零刻度间隔一段距离
data: ['大客户', '人才服务部', '人才招聘部', '人才培训部', '档案服务部', '外包服务部'], //X轴类目数据,仅type为category时有效
//X轴刻度相关设置
axisTick: {
show: true, //是否显示X轴刻度,默认显示
interval: 0, //坐标轴刻度的显示间隔
inside: false, //坐标轴刻度是否朝内,默认朝外
alignWithLabel: false, //刻度是否位于标签中间
},
//X轴刻度标签相关设置(指X轴文字)
axisLabel: {
show: true, //是否显示
color: '#ccc', //文字颜色
interval: 0, //间隔显示个数
rotate: 20, //刻度标签旋转的角度,值>0向左倾斜,值<0则向右倾斜,旋转的角度从 -90 度到 90 度。
},
//x轴轴线相关设置
axisLine: {
show: false, //是否显示X轴,默认显示
symbol: ['none', 'arrow'] //轴线两边的箭头,默认不显示
},
//坐标轴提示框配置项,鼠标移入图形时显示
axisPointer: {
show: false, //默认不显示
type: 'shadow', //'line'直线指示器 'shadow'阴影指示器 'none'无
},
}
],
4.Y轴配置
//直角坐标系 grid 中的 y 轴,如果有多条Y轴,yAxis为数组
//当有两个Y轴时默认分别位于坐标轴两端
//如果柱状和折线都有,则要通过数组设置两个对象,分别对应柱状和折线的样式
yAxis: {
type: 'value', //坐标轴类型:'value' 数值轴,适用于连续数据;'category' 类目轴,适用于离散的类目数据;'time' 时间轴,适用于连续的时序数据
name: '数据', //坐标轴名称
min: 0, //坐标轴刻度最小值
max: 100, //坐标轴刻度最大值
interval: 20, //强制设置坐标轴分割间隔
minInterval: 1, //表示将刻度的最小间距设置为1,只在数值轴或时间轴中有效
//Y轴刻度标签相关设置
axisLabel: {
formatter: '{value} %', //Y轴刻度格式,支持字符串模板和回调函数两种形式
color: '#fff', //刻度标签文字的颜色
},
//Y轴在 grid 区域中的分隔线(横向)
splitLine: {
show: true, //是否显示
interval: 0, //坐标轴分隔线的显示间隔,在类目轴中有效
lineStyle: {
color: "#053c89", //分隔线颜色
width: "2", //分隔线宽度
type: "solid", //线条样式,实线、虚线
}
}
},
配置2个Y轴:yAxis:[{},{}],且需要在series:[]中配置yAxisIndex
5.原生图形配置
//原生图形元素组件
graphic:
{
z: 1000, //显示层级
type: 'image', //可随意是image, text, circle, sector, ring等
id: 'logo',
left: '32%',
top: '42%',
bounding: 'raw', //决定此图形元素在定位时,对自身的包围盒计算方式
rotation: 0, //旋转角度
origin: [66.5, 40.5], //中心点
scale: [1.0, 1.0], //缩放
style: {
image: situationhouseicon, //图片路径
width: 129,
height: 65,
opacity: 1
}
},
6.其它配置
/echarts容器背景色
backgroundColor: '#000',
//系列颜色,调色盘颜色列表,可以在全局设置,也可以分别设置在series中
color: ["#fff", "#ccc"],
//标题,可以设置多个,形式为数组
title: {
text: "各单位落实情况", //文本
//文本样式设置
textStyle: {
color: "#333333", //颜色
fontSize: 20, //字体大小
},
//位置
left: "center",
top: "0%"
},
//图例,图中的标记(symbol),通常位于右上方,颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
icon: "rect", //形状
orient: "horizontal", //horizontal水平方向排列,vertical垂直方向排列
itemGap: 25, //间距
itemWidth: 15,
itemHeight: 7,
top: '10%',
right: 0,
borderRadius: 10,
data: ['参考1', '参考2', '百分比数据', '百分比2'], //如果不设置,会通过series系列数据自动生成
textStyle: {
color: '#ccc', //文字颜色
fontSize: "20",
},
selectedMode: false, //控制是否可以通过点击图例改变图形的显示状态。默认开启,false可关闭。
},
//提示框,可以全局设置,也可设置在坐标系或系列数据中
tooltip: {
trigger: "axis", //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用;'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
axisPointer: {
type: "shadow", //提示类型:鼠标移入显示阴影
}
},
//坐标系内的绘图网格,可以理解为整个图表
grid: {
top: '20%',
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true, //grid区域是否包含坐标轴的刻度标签
},
//用于区域缩放,从而能自由关注细节的数据信息,不常用
dataZoom: [
{
xAxisIndex: 0,
show: false, //是否展示dataZoom组件
type: "slider",
startValue: 0,
endValue: 3
}
],
一、柱形图
1.设置柱形渐变色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 0.95,
colorStops: [
{
offset: 1,
color: 'rgba(32,41,61,0.1)', // 0% 处的颜色
},
{
offset: 0,
color: '#343B52', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
2.设置柱形背景色
option = {
series: [
{
type: 'custom',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 0.95,
colorStops: [
{
offset: 1,
color: 'rgba(32,41,61,0.1)', // 0% 处的颜色
},
{
offset: 0,
color: '#343B52', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
renderItem: function (params, api) {
//获取对应类目的axisTick中心点坐标
var start = api.coord([api.value(0)]);
//通过坐标系的宽度和类目数,计算单个类目的背景
var width=(params.coordSys.width/7)*0.6;
return {
type: 'rect',
shape: {
// 相对左上角坐标
x: start[0]-width/2,
y: params.coordSys.y,
width:width,
height: params.coordSys.height,
},
style: api.style()
};
},
data: [0, 0, 0, 0, 0, 0, 0]
},
...
]
}
3.设置顶部白色横杠
series: [
{
//顶部的白色横杠
name: '退款',
type: 'pictorialBar',
symbol: 'rect',
symbolSize: [10, 2],
symbolOffset: [-4.5, 0],
symbolPosition: 'end',
data: invoiceWeight,
zlevel: 9,
itemStyle: {
color: '#fff',
},
},
...
]
4.设置某个柱形背景色
xAxis: {
type: 'category',
data: ['24/1', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
markArea: {
silent: true,
data: [
[
{ xAxis: 'Wed'},
{ xAxis: 'Wed'}
]
],
itemStyle: {
color: 'red'
}
}
二、条形图
1.设置条形背景色
series: [
{
type: 'custom',
color: {
type: 'linear',
x: 0.95,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: 'rgba(32,41,61,0.1)', // 0% 处的颜色
},
{
offset: 0,
color: '#343B52', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
renderItem: function (params, api) {
// 获取对应类目的axisTick中心点坐标
var start = api.coord([0, api.value(0)]); // 这里的 api.value(0) 是 Y 轴的值
// 通过坐标系的高度和类目数,计算单个类目的背景
var height = (params.coordSys.height / 5) * 0.8; // 假设有 7 个类目
return {
type: 'rect',
shape: {
// 相对左上角坐标
x: params.coordSys.x,
y: start[1] - height / 2,
width: params.coordSys.width,
height: height,
},
style: api.style()
};
},
data: [0, 1, 2, 3, 4] // 这里的 data 可以根据实际情况调整
},
]
三、环形
1.渐变色
series: [
{
name: 'Access From',
type: 'pie',
radius: ['70%', '85%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 2,
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 12,
}
},
labelLine: {
show: false
},
data: [
{
value: this.proport.alarm,
name: '报警',
itemStyle: {
normal: {
color: {
type: 'linear',
colorStops: [
// !! 在此添加想要的渐变过程色 !!
{ offset: 1, color: '#D10053' },
{ offset: 0.2, color: '#4C062F' },
{ offset: 0, color: 'rgba(32,8,35,0.3)' }
]
},
}
}
},
{
value: this.proport.warn,
name: '预警',
itemStyle: {
normal: {
color: {
type: 'linear',
colorStops: [
// !! 在此添加想要的渐变过程色 !!
{ offset: 0, color: '#004DFA' },
{ offset: 0.8, color: '#001F63' },
{ offset: 1, color: 'rgba(0,14,43,0.3)' }
]
},
}
}
}
]
}
],
2.半环形进度
// This example requires ECharts v5.5.0 or later
option = {
title: {
text: '75',
textStyle: {
color: '#01c4a3',
fontSize: 40
},
subtext: '总分:100分',
subtextStyle: {
color: '#909090',
},
itemGap: -10, // 主副标题距离
left: 'center',
top: 'center'
},
angleAxis: {
max: 100, // 满分
startAngle: -90,
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '120%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '作文得分',
value: 50,
// startAngle: 0,
// endAngle: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FE3EC4'
},
{
offset: 0.5,
color: '#583581'
}, {
offset: 1,
color: 'rgba(43,39,97, 0.7)'
}])
}
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 25,
barGap: '-100%', // 两环重叠
z: 2,
}]
};
相关文章:
Echarts官方文档
Echarts各类图表option参数中文含义及常用值解析
ECharts 柱状图常用配置
EChart 多系列柱状图绘制背景图