echarts笔记

 

//折线图标题
title: {
    text: ''
},
//鼠标移入
tooltip: {
    trigger: 'axis'
},
//设置折线图位置
grid: {
    left: '3%',
    right: '1%',
    bottom: '3%',
    containLabel: true
},
//工具箱
toolbox: {
    //是否显示工具箱
    show: true,
        //工具箱列表
        feature: {
            //数据缩放
            dataZoom: {
                yAxisIndex: 'none'
            },
            //数据视图
            dataView: {
                readOnly: false
            },
            //折线图和柱状图来回切换
            magicType: {
                type: ['line', 'bar']
            },
            //重置
            restore: {
                show:true
            },
            //保存为图片
            saveAsImage: {}
      }
},
//X轴数据太多时，X轴下有个缩放区间，可手动拖动(适合大数据下显示)
dataZoom:[{
    type:'slider',
    start:0,//从0%开始
    end:10//到10%结束
}],
//值域选择
dataRange:{
    min:0,
    max:200,
    calculable:true,
    //值域区间的颜色渐变
    color:['#d94e5d','#eac736','#50a3ba'],
        textStyle:{
        color:'#000'
    }
},
//图例
legend:{
    data:['销量']  
},
//X轴
xAxis: {
    type: 'category',
    boundaryGap: false,
    data:data.curve,
    show:false,
    axisLabel :{
       //显示所有的点
       interval:0
    }
},
//Y轴
yAxis: {
    type: 'value',
    show:false,
    //设置Y轴最大值
    max:data.MaxNumber,
    //设置为 Log，可以避免因为某一个数据拉低整体效果
    type: 'log',
},
//数据，每多一个对象，就会多一条线
series: [{
    name: "seriesName",//是鼠标放上去显示的名称
    type: "line",//展示数据的类型，是柱状图还是折线图，饼状图
    smooth:true,  //把线变成曲线
    symbol: 'circle',//设定为实心点
    symbolSize: 20, //设定实心点的大小
    data: "seriesData"//展示的数据
    itemStyle: {
        normal: {
            color: "#2ec7c9",//鼠标放上去前面的小圆点的颜色
            lineStyle: {
                color: "#2ec7c9"//折线的颜色
            }
        }
    },
//图表标注
    markPoint:{
        //标记的图形
        symbol:'pin',
        data:[
            //在图表中突出显示最大值和最小值
            {type:'max',name:'最大值'},
            {
                type:'min',
                name:'最小值',
                //图表形状
                symbol:'arrow'
            }
         ]
    },
    //图表标线
    markLine:{
       data:[
          //在图表中显示平均值分割线
          {type:'average',name:'平均值'}
      ]
  }
   
}]