echarts 学习笔记

 配置笔记

var chartopt = {
      title: {
        text: '月新增文章数',  // 标题
        left: 'center', //标题内容 距离左边距离/方向
        top: '10'   //标题内容 距离上面距离/方向
      },
      tooltip: {
        trigger: 'axis'  //提示信息 鼠标放上去显式的信息,也就是虚竖线
      },
      legend: {
        data: ['新增文章'],//例图组件  有点类似于分组的信息
        top: '40' 距上面距离
      },
      toolbox: {   //图表的工具 : 导出图片,数据视图,动态类型切换 数据区域缩放,重置
        show: true,//显式
        feature: { //各工具配置项目,还可以自定义工具
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [     //x轴
        {
          name: '日',
          type: 'category',   //坐标轴类型 一般是这样设置
          boundaryGap: false, //留白,即标签和数据都会在两个刻度之间(mon 是x轴的最左边坐标,然后柱子就在最左边,会超过y轴线)
          data: aDate
        }
      ],
      yAxis: [    //y轴
        {
          name: '月新增文章数', //x轴信息
          type: 'value'   //坐标轴类型 
        }
      ],
      series: [
        {
          name: '新增文章',  //对应tooltip,
          type: 'line',// 是什么类型的
          smooth: true,//是否曲线平滑
          itemStyle: { 
              normal: { 
                areaStyle: {  // 区域的设置
                   type: 'default' // 使用默认的
                }, 
                color: '#f80' //区域的颜色
              }, 
              lineStyle: { color: '#f80' } //走势图线条的颜色
          },
          data: aCount
        }],
      areaStyle: {
        normal: { //默认的设置
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{    //这里设置的是一个过渡颜色
            offset: 0,
            color: 'rgba(255,136,0,0.39)'  
          }, {
            offset: .34,
            color: 'rgba(255,180,0,0.25)'
          }, {
            offset: 1,
            color: 'rgba(255,222,0,0.00)'
          }])

        }
      },
      grid: {  //这里设置的是整个图标距离图表div包裹的距离
        show: true,//要设置生效
        x: 50, 距离左边
        x2: 50,距离右边
        y: 80,距离上边
        height: 220  整个的高度
      }
    };