【Echarts使用】之 无拐点
无拐点123456789series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true, //关键点,为true是不支持虚线的,实线就用true symbolSize:0, // 折线拐点圆的大小 }]
折线线型1234567891011121314series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', lineStyle:{ width:2, type:'dotted' //'dotted'虚线 'solid'实线 'dashed'虚线 } ...
【Echarts使用】之 无数据是连线
1234567891011121314series:[ { type: 'line', connectNulls: true,//无数据是是否连线 stack: 'Total', symbol: 'circle', //拐点样式 symbolSize: 4, //拐点圆大小 itemStyle: { color: '#292B37', //拐点内圆颜色 borderColor: '#5B5E74', //拐点外圆颜色 width: 2, //拐点内圆大小 }, }]
【Echarts使用】之 设置柱子borderRadius
1234567891011121314151617series:[ { type: 'bar', stack: 'Total', itemStyle: { borderColor: bgColor, borderRadius: [4, 4, 4, 4], // 圆柱 color: bgColor }, emphasis: { itemStyle: { borderColor: bgColor, color: bgColor } }, }]
【Echarts使用】之 图例选中状态
图例选中状态表。
12345678legend:{ selected: { // 选中'系列1' '系列1': true, // 不选中'系列2' '系列2': false }}
使用
1234567legend: { show: true, selected: { '1星': true, '2星': true, '3星': true, '4星': false, '5星': false }, bottom: 0},
【Echarts使用】之 设置从原点开始
123xAxis:{ boundaryGap: false, // 不留白,从原点开始}
【Echarts使用】之 grid
示例1234567grid: { top: '3%', left: '12%', right: '0%', bottom: '3%', containLabel: true},
echarts 组件离容器左侧的距离。
containLabel:containLabel 为 false 的时候:grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景,因为往往多个 grid 对齐的时候,是依据坐标轴来对齐的。
containLabel 为 true 的时候:grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变 ...
【Echarts使用】之基准线markLine
设置了两条基准线1234567891011121314151617181920212223242526272829303132333435markLine: { symbol: "none", data: [{ label: { width: "30", position: 'start', formatter: t('sleepManage_cycle.sameChart.rs'), fontSize: '10', color: '#86899D', overflow: 'break', }, silent: false, lineStyle: { type: "das ...
【Echarts使用】之 x/y轴刻度、文字、轴线样式、分割线
隐藏 x/y 轴刻度123456789101112131415161718// x轴xAxis: { type: 'category', splitLine: { show: false }, data: ['11/25', '11/26', '11/27', '11/28', '11/29', '11/30', '12/1'], axisTick: { show: false //隐藏x轴刻度 },},// y轴yAxis: { type: 'category', splitLine: { show: false }, data: ['11/25', '11/26', '11/27', & ...