Echarts常用属性含义
学习网站 百度搜索 echarts gallery
https://www.makeapie.com/explore.html#charts=bar~sort=rank~timeframe=all~author=all
直接上效果图
属性注释
option = {
title: {
padding:[28,0,0,16],
text: '哈哈',
textStyle: {//标题样式
fontWeight: "normal",
color: "#59DAE8",
fontSize: 14,
left:'center',
},
},
backgroundColor: '#001848',//整个绘图背景色 grid: { //绘图在容易中的位置 left: '2%', right: '5%', bottom: '5%', containLabel: true //grid 区域是否包含坐标轴的刻度标签。false可能溢出 },
color:['#f7a35c', '#2f4554', '#61a0a8', '#00BCD4', '#00BCD4', '#00BCD4', '#00BCD4', '#00BCD4'], //修改legend颜色
legend: {
left: 130,
y: 24,
// 如果series中有name，那么data可以省略
data: ['支付总额','合同总额', '项目数'],
},
xAxis: { name:'时间',//x轴标题 // 'value' 数值轴，适用于连续数据。 // 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 // 'log' 对数轴。适用于对数数据。 type: 'category', axisTick:{ show:true,//刻度线
alignWithLabel: true //让刻度线居 }, boundaryGap: false, axisLabel: { show: true,
textStyle: { color: 'rgba(255,255,255,.5)', //更改坐标轴文字颜色 fontSize : 14 //更改坐标轴文字大小 } }, axisLine:{ lineStyle:{//x轴轴线的属性配置 color:'rgba(87,192,255)', width:1, } },
bounddaryGap: false // 去除轴内间距 }, yAxis: { name:'告警次数', //y轴标题 type: 'value', axisTick:{ show:true,//显示刻度线 }, axisLabel: { show: true, textStyle: { color: 'rgba(255,255,255,.5)', //更改坐标轴文字颜色 fontSize : 14 //更改坐标轴文字大小 } }, axisLine:{ lineStyle:{//y轴的轴线的属性配置 width:1, color:'rgba(87,192,255)', } }, splitLine: { //网格线属性配置 show: true, lineStyle: { color: 'rgba(87,192,255,.2)', width: 1, type: 'solid' } }
inverse:true //翻转Y轴 },
dataZoom:{
id: 'dataZoomX',
show:true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
type: 'slider', //slider表示有滑动块的，inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式 },
fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: 'filter', //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
//'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
//'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
//'none': 不过滤数据，只改变数轴范围。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。
'horizontal'：水平。'vertical'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%' }, { id: 'dataZoomY', type: 'inside', filterMode: 'empty',
disabled:false, //是否停止组件的功能。
tooltip : { trigger: 'axis', backgroundColor:'transparent',//提示数据的背景色 // 其中变量a、b、c在不同图表类型下代表数据含义为： // 折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无） // 散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无） // 饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比） // 弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)
// 柱状图： a(系列名称), b (数据名)，c(数据值)，{@xxx}（数据中名为xxx的维度的值，如{@product}表示名为product的维度的值）,{@[n]}:数据中维度n的值，如{@[3]}表示维度3的值，从0开始计数。 // 力导向图 : // 节点 : a（类目名称），b（节点名称），c（节点值） // 边 : a（系列名称），b（源名称-目标名称），c（边权重）， d（如果为true的话则数据来源是边） // {Function}，传递参数列表如下： // <Array> params : 数组内容同模板变量，[[a, b, c, d], [a1, b1, c1, d1], ...] // <String> ticket : 异步回调标识 // <Function> callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html formatter:'<span style="color: rgba(87,192,255);">{c}'+'次</span>',//自定义数据格式 b:X轴数据 axisPointer: { type: 'line', // shadow cross line 三种类型 crossStyle:{ //水平辅助线属性 color:'#f00', width:0 }, lineStyle:{ //竖线竖线 color:'rgba(87,192,255)', }, label: { // backgroundColor: 'rgba(87,192,255)', // color:'rgba(87,192,255)' }, } }, series: [
{
barWidth: 30,/* 柱状图宽度*/
barGap:'0',/*多个并排柱子设置柱子之间的间距*/
barCategoryGap:'30%',/*多个并排柱子设置柱子之间的间距*/
},
{
type:'line', symbol: 'none', // 点的属性 'circle' , 'rectangle', 'triangle', 'diamond','emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond' smooth:true, //折线图变为光滑的曲线图 itemStyle: { //曲线部分渐变 normal:{ // label : { // show: true // }, //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgba(13, 191, 255, 0)' }, { offset: .5, color: 'rgba(13, 191, 255, .5)' },{ offset: 1, color: 'rgba(13, 191, 255, 1)' }])
// 颜色按照数组顺序渲染
color: funtion(params){
//params 是每条柱子/每条线
return colorList[params.dataIndex];
}
} }, areaStyle: { //阴影部分渐变 normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始 offset: 0, color: 'rgba(13, 191, 255, 0)' }, { offset: 0.75, color: 'rgba(13, 191, 255, .5)' }, { offset: 1, color: 'rgba(13, 191, 255, .6)' }, ]) //这个数组代表着渐变的过程 } }, } ] }; option.xAxis.data = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']; option.series[0].data = [0,0.5,1,3,3.3,3.5,4,5,6,6.5,7,6.5,6,5,4,4,3,2.4,2.1,2,1,0.5,0.3,0]; let chart = echarts.init(document.getElementById('chart')); chart.setOption(option);
常用配置
let option2 = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, title: { padding:[0,0,0,0], text: '各镇办岗位数', textStyle: { fontWeight: "normal", color: "#eff0f0", fontSize: 14, left:'center', }, }, grid: { left: '0%', right: '4%', top: '8%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01], position: 'top', axisLine:{ lineStyle:{ color:"#fff", width:1, } } }, yAxis: { type: 'category', data: ['明办', '桂办', '月办', '金办', '宋办', '仙庾','茨办'], axisLine:{ lineStyle:{ color:"#fff", width:0, } } }, series: [ { type: 'bar', data: [20,26,50,56,59,80,103,120,150,165,168,190,201], label: { //设置柱状图上显示 对应值 show: true, position: 'right', color:'#fff' }, itemStyle: { normal: { color: function(params) { // 设置前三个颜色不一样 let num = params.value; let djg = params.dataIndex; //第几个数 let retcoler = new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#F48B70'}, //柱图渐变色 {offset: 1, color: '#ED6191'}, //柱图渐变色 ] ); if(djg>9){ retcoler = '#ED6191'; } return retcoler }, barBorderRadius: [0, 8, 8, 0] // 设置柱状图圆角（顺时针左上，右上，右下，左下） }, }, }, ] };
let option2 = { color:['#6CF7F4','#f00','#f5f','blue'], title: { padding:[28,0,0,16], text: '次', textStyle: { fontWeight: "normal", color: "#59DAE8", fontSize: 14, left:'center', }, }, tooltip: {}, legend: { // data:['销量'] // data:['年','月','周','日'] }, textStyle: { color: '#59DAE8' }, xAxis: [ { type: 'category', data: ['告警次数', '待处理', '正常'], axisTick: { alignWithLabel: true }, axisLine: { lineStyle: { color: 'rgba(0,0,0,0)', // X轴及其文字颜色 }, }, axisLabel: { show: true, textStyle: { color: '#59DAE8', //更改坐标轴文字颜色 // fontSize : 16 //更改坐标轴文字大小 } }, } ], yAxis: [ { type: 'value', // data: param.yData, axisLine: { lineStyle: { color: 'rgba(0,0,0,0)', // Y轴及其文字颜色 } }, axisLabel: { show: true, textStyle: { color: '#59DAE8', //更改坐标轴文字颜色 // fontSize : 14 //更改坐标轴文字大小 } }, splitLine:{ show:true, lineStyle:{ type:'dashed', color:'#999' } } }], series: [{ type: 'bar', data: [1250, 1750, 2300] }] };
带滚动条案例
let colorList = ['#0081fa', '#d77a94'] let data = [ ["汇聚数据", "实际汇聚类型", "剩余汇聚类型"], ["公*局", 2, 1], ["交**队", 3, 2], ["各*******单位", 1, 1], ["运*局", 3, 2], ["客*办", 2, 1], ["公*团", 2, 1], ["农*局", 1, 1], ["教*育", 1, 1], ["城***委", 2, 1], ["商*务", 5, 3], ["市*管***理局", 2, 1], ["卫**委", 2, 1], ["生**局", 1, 1], ["民***局", 1, 1], ["机***理局", 1, 1], ["一**通", 1, 1], ["互****业", 1, 1], ["机***车", 1, 1] ] let option2 = { color: colorList, "dataset": { "source": data }, "grid": { "width": '90%', "left": '0%', "right": 40, "bottom": 50, "top": "10%", // "containLabel": true }, "xAxis": [{ "show": false, position: 'top', }], "yAxis": [{ "type": "category", //是否反向坐标轴 "inverse": true, "axisLabel": { "color": "#fff", "fontSize": 14, "fontWeight": "normal", align: 'left', padding: [-80, 0, 0, 10] }, max: 20, "show": true, "splitLine": { "show": false, }, "axisTick": { "show": false }, "axisLine": { "show": false } }], "tooltip": { "show": false, // "trigger": "axis", // "axisPointer": { // "type": "shadow" // }, }, "legend": { "show": true, "type": "scroll", "top": 15, "left": "center", "textStyle": { "color": 'white', fontSize: 14 }, }, "series": [{ "type": "bar", "name": "汇聚数据", "itemStyle": { "barBorderRadius": 10 }, "barGap": "50%", barCateGoryGap: 20, // "stack": "total", "label": { "color": "#fff", "fontSize": 14, // position: [0, '-20'], "fontWeight": "normal", "show": true, // formatter: function(data) { // return chartName[data.dataIndex]; // } }, "barMaxWidth": 22.22222222222222, "barWidth": 22.22222222222222, "animation": true }, { "type": "bar", "name": "共享数据", "itemStyle": { "barBorderRadius": 10 }, "barGap": "50%", barCateGoryGap: 20, // "stack": "total", "label": { "color": "#fff", "fontSize": 14, // position: [0, '-20'], "fontWeight": "normal", "show": true, // formatter: function(data) { // return chartName[data.dataIndex]; // } }, "barMaxWidth": 22.22222222222222, "barWidth": 22.22222222222222, "animation": true }], "title": { "show": false }, // 滚动条 "dataZoom": [{ type: 'slider', show: true, "filterMode": "empty", "disabled": false, yAxisIndex: 0, // top: '25%', right: '5%', // bottom: '15%', width: 10, start: 0, end: 30, handleSize: '0', // 滑动条的 左右2个滑动小块的大小 handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', textStyle: { color: "#fff" }, fillerColor: '#3C62C0', // 拖动条的颜色 borderColor: "none", backgroundColor: 'rgba(60, 98, 192, 0.302)', showDetail: false // 即拖拽时候是否显示详细数值信息 默认true }, ], }
仪表盘
let option = { title: { left: 10, y: 0, text: '移民后扶资金执行情况', textStyle: { fontWeight: 500, fontSize: 16 } }, tooltip: { trigger: 'axis' }, legend: { left: 10, y: 24, data: ['收入', '支出'] }, grid: { //绘图在容易中的位置 left: '2%', right: '5%', bottom: '5%', containLabel: true //grid 区域是否包含坐标轴的刻度标签。false可能溢出 }, calculable: true, xAxis: [ { type: 'category', axisLabel: { show: true }, axisTick: { show: true }, axisLine: { lineStyle: { color: '#666' } }, splitLine: { show: false }, data: ['建筑', '市政道路', '绿化', '场平'] } ], yAxis: [ { show: true, type: 'value', axisLabel: { show: true, textStyle: { color: '#000', //更改坐标轴文字颜色 // fontSize : 14 //更改坐标轴文字大小 } }, // axisTick: { // show: false // }, splitLine: { show: false, lineStyle: { type: 'solid', color: '#999' } } } ], series: [ { name: '收入', type: 'bar', effect: { symbol: 'rect' }, itemStyle: { normal: { color: function(params) { let colorList = ['#3398db', '#00BCD4', '#90ed7d', '#f7a35c', '#61a0a8', '#61a0a8', '#91c7ae', '#2f4554']; return colorList[params.dataIndex] } } }, areaStyle: { normal: { opacity: 0.4 } }, lineStyle: { normal: { opacity: 0 } }, showSymbol: false, data: [20, 30, 40, 50] }, ] } // const { dataChartRiverArea, fontSize } = this.props; // const dataChartRiverArea2 = orderBy(dataChartRiverArea, ['fspfl'], ['desc']); this.chart.setOption(option);
series: [ { min: 0, max: 100, name: '今日空气质量', type: 'gauge', // 类型是仪表盘 startAngle: 180, //开始角度 左侧角度 endAngle: 0, //结束角度 右侧 splitNumber: 1, //刻度的值 radius: '130%', // 设置仪表盘半径 center : ['50%', '80%'],//仪表盘的位置 第一个值为x轴，第二个值为y轴 axisLine: { // 坐标轴线，也就是圆圈的边框线,包括了左右两侧的文字 show: true, lineStyle: { width: 20, // 透明度设置为0 opacity: 0, color: [ [0.09,'transparent'], [1,'transparent'] ], width:60, shadowColor: 'purple', shadowBlur: 10 }, }, splitLine: { show: false, }, axisTick: { length: '15%', // 刻度线长度 splitNumber: 30, // 刻度线个数 lineStyle: { width: 3, color: '#675FA7', }, }, pointer: { //仪表盘指针。 show: true, length: '60%', //指针长度 width: 2, //指针宽度 type: 'solid' }, itemStyle: { // 指针样式 color: '#675FA7', borderColor: '#675FA7', borderType:'solid' }, // title: { // offsetCenter: [0, '68%'], // x, y，单位px // fontWeight: 'bolder', // fontSize: 15, // fontStyle: 'italic', // color: '#fff', // shadowColor: '#fff', //默认透明 // shadowBlur: 10, // }, detail: { //最下面数值的设置 offsetCenter: ['0', '22%'], // x, y，单位px formatter: '{value}', // 单位 textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE color: '#675FA7', fontSize : 30, fontWeight: 'bold' } }, //鼠标经过时显示的名 data: [{ value: 45, name: '' }], }, { name: '内侧线条', type: 'gauge', //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。 startAngle: 180, //结束角度。 endAngle: 0, center: ['50%', '80%'], // 默认全局居中 //半径 radius: '102%', //仪表盘轴线相关配置。 axisLine: { // 坐标轴线 show:true, lineStyle: { // 属性lineStyle控制线条样式 width: 22, color: [[0,'#675FA7'],[45 / 100,'#675FA7'],[1,'#F5F5F5']], // 仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。, }, }, //分隔线样式。 splitLine: { show: false, }, //刻度样式 axisTick: { show: false, }, //刻度标签。 axisLabel: { show:false, }, //仪表盘指针。 pointer: { show: false, }, //仪表盘标题。 title: { show: false }, //仪表盘详情，用于显示数据。 detail: { show: false, offsetCenter: [0, 0], formatter: '', textStyle: { fontSize: 0 } }, data: [ {name:'数量', value:'n'}, ], zlevel:3 }, { name: '内侧线条', type: 'gauge', //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。 startAngle: 180, //结束角度。 endAngle: 0, center: ['50%', '80%'], // 默认全局居中 //半径 radius: '60%', //仪表盘轴线相关配置。 axisLine: { // 坐标轴线 show:true, lineStyle: { // 属性lineStyle控制线条样式 width: 6, color: [[0,'#675FA7'],[1,'#675FA7']], // 仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。, }, }, //分隔线样式。 splitLine: { show: false, }, //刻度样式 axisTick: { show: false, }, //刻度标签。 axisLabel: { show:false, }, //仪表盘指针。 pointer: { show: false, }, //仪表盘标题。 title: { show: false }, //仪表盘详情，用于显示数据。 detail: { show: false, offsetCenter: [0, 0], formatter: '', textStyle: { fontSize: 0 } }, data: [ {name:'数量', value:'n'}, ], zlevel:3 } ]
每条柱子不同背景色
series: [ { name: 'xx', type: 'bar', effect: { symbol: 'rect' }, itemStyle: { normal: { color: function(params) { let colorList = ['#3398db', '#00BCD4', '#90ed7d', '#f7a35c', '#61a0a8', '#61a0a8', '#91c7ae', '#2f4554']; return colorList[params.dataIndex] } } }, areaStyle: { normal: { opacity: 0.4 } }, lineStyle: { normal: { opacity: 0 } }, showSymbol: false, data: [20, 30, 40, 50] }, ]
双Y轴
yAxis: [//这里配置两条Y轴 { type: 'value', splitLine: { show: false, lineStyle: { color: '#000', width: 1 } }, axisLine: { lineStyle: { color: '#000', width: 0.5 } }, axisLabel: { show: true, textStyle: { color: '#000' }, fontSize: 11, interval: 'auto', formatter: '{value}' }, name: '总额（万）', nameTextStyle: { color: '000' } }, { type: 'value', splitLine: { show: false, lineStyle: { color: '#021439', width: 1 } }, axisLine: { lineStyle: { color: '#000', width: 1 } }, axisLabel: { show: true, textStyle: { color: 'blue' }, fontSize: 11, interval: 'auto', formatter: '{value}' }, name: '项目数（个）', nameTextStyle: { color: '#000', fontSize: 11, } } ], { name: '项目数', type: 'bar', effect: { symbol: 'rect' }, itemStyle: { normal: { color: function(params) { let colorList = ['#2f4554', '#61a0a8', '#61a0a8', '#f7a35c', '#90ed7d', '#61a0a8', '#00BCD4', '#3398db']; return colorList[params.dataIndex] } } }, areaStyle: { normal: { opacity: 0.4 } }, lineStyle: { normal: { opacity: 0 } }, showSymbol: false, data: countList, yAxisIndex: 1, // 这里是关键 可以显示右边的Y轴 },
小圆
{ name: '外圆', type: 'scatter', hoverAnimation: false, data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 50], yAxisIndex: 2, symbolSize: 35, itemStyle: { normal: { color: function(params) { var num = myColor.length; return myColor[params.dataIndex % num] }, opacity: 1, } }, z: 2 }
其他特点
1. yAxis可以使数组，里面有多个对象
2. yAxisIndex ，是在有多个y轴时使用，可以使两条数据层叠
