echarts折线图相关

Posted 2021-01-16 moutudou

optionJKDLine = {
　　title: {
　　text: ‘告警数量趋势图‘,
　　textStyle:{　　//标题样式
　　　　fontStyle:‘normal‘,
　　　　fontFamily:‘sans-serif‘,
　　　　fontSize:12
　　　　}
　　},
　　tooltip: {trigger: ‘axis‘},
　　legend: {　　//图例,默认显示
　　},
　　grid: {　　//图表距离
　　　　left: ‘-3%‘,
　　　　right: ‘5%‘,
　　　　bottom: ‘3%‘,
　　　　top:‘20%‘,
　　　　containLabel: true
　　},
　　toolbox: {　　//右侧工具栏
　　　　feature: {
　　　　　　saveAsImage: {}
　　　　}
　　},
　　visualMap: {//区间内控制显示颜色 折线点的颜色变化
　　　　show: false,
　　　　dimension: 1,
　　　　pieces: [
　　　　　　{
　　　　　　　　gte: 0, lte: 140, color: ‘#7EF57C‘ //表示0-140之间的数值，是这个#7EF57C颜色，大于这个140，则#ff0000颜色。
　　　　　　}],
　　　　　outOfRange: {
　　　　　　color: ‘#ff0000‘
　　　　}
　　},
　　xAxis: {
　　　　type: ‘category‘,
　　　　boundaryGap: false,
　　　　data: [‘01‘, ‘02‘, ‘03‘, ‘04‘, ‘05‘, ‘06‘, ‘07‘]
　　},
　　yAxis: {
　　　　type: ‘value‘,
　　　　show:false　　//不显示Y轴
　　},
　　yAxis : [{　　//显示Y轴，但不显示数值
　　　　axisLabel : {
　　　　formatter: function(){
　　　　　　return "";
　　　　　　}
　　　　}
　　}],
　　series: [{
　　　　name:‘告警数量‘,
　　　　type:‘line‘,
　　　　data: [120, 132, 191, 194, 120, 130, 110],
　　　　smooth: true,
　　　　itemStyle : {
　　　　　　normal : {
　　　　　　label : {show: true},
　　　　　　color:‘#ED7967‘,
　　　　　　lineStyle:{
　　　　　　color:‘#EDC167‘
　　　　}
　　}],
　　areaStyle: {　　//折线图区域颜色线性渐变显示
　　　　normal: {
　　　　color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
 　　　　　　[
　　　　　　{offset: 0, color: ‘#7CF5A2‘},
　　　　　　{offset: 0.6, color: ‘#7EF57C‘},
　　　　　　{offset: 1, color: ‘#fff‘}]
　　　　　　　　)
　　　　　　}
　　　　},
　　]
};

　

实现如下：