Echarts配置

option = {
   grid:{//直角坐标系内绘图网格
      show:true,//是否显示直角坐标系网格。[ default: false ]
      left:"5%",//grid 组件离容器左侧的距离。
      right:"30px",
      bottom:"5%", 
      top:"10%"
      borderColor:"#c45455",//网格的边框颜色

  },
  tooltip: {//提示框
    trigger: 'axis',//触发类型：axis坐标轴触发，item数据项图形触发，none
    axisPointer: {//坐标轴指示器配置
      type: 'cross',//line直线，shadow阴影，cross十字准星，none
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {//工具箱
    feature: {
      dataView: { show: true, readOnly: false },//数据视图
      magicType: { show: true, type: ['line', 'bar'] },//动态类型切换
      restore: { show: true },//配置项还原
      saveAsImage: { show: true }//保存为图片
    }
  },
  legend: {//图例
    data: ['Evaporation', 'Precipitation', 'Temperature']
  },
  xAxis: [//x轴配置
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {//坐标轴指示器配置
        type: 'shadow'
      },
      axisLabel:{
        margin:20,//x轴name与轴之间的间距调整
      },
      nameTextStyle: {//坐标轴名称的文字样式
        lineHeight: 30, //标题行高
        padding: [-100, 0, 0, -80],
        verticalAlign: "top",//文字垂直对齐方式
      }
    }
  ],
  yAxis: [//y轴配置
    {
      type: 'value',
      name: 'Precipitation',
      nameGap:40,//坐标轴名称与轴线之间的距离
      min: 0,
      max: 250,
      interval: 50,//设置坐标轴分割间隔
      axisLabel: {//做煲粥刻度标签设置
        formatter: '{value} ml',//刻度值加单位
        margin:20,//y轴刻度值与轴之间的间距调整
      }
    },
    {
      type: 'value',
      name: 'Temperature',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [//数据配置
    {
      name: 'Evaporation',
      type: 'bar',//柱状图
      //series.tooltip 仅在 tooltip.trigger 为 'item' 时有效
      tooltip: {//提示框浮层位置，不设置时位置随鼠标移动
        //position:[10,10],//绝对位置，相对于容器左侧 10px, 上侧 10 px
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ],
      lineHeight: 30,
      label: {//柱状图顶部数据
          show: true,
          position: 'top' // 可以是 'top', 'left', 'right', 'bottom', 'inside', 或者 'insideLeft' 等
      },
      // 在 series 的 itemStyle 中设置折点颜色
      itemStyle: {
         normal: {
            color: 'red', // 折点颜色
            lineStyle: {
                color: 'blue' // 线条颜色
            }
         }
      },
      // 是否显示折点
      showSymbol: true,
      // 设置折线上圆点大小
      symbolSize:10,
      // 设置拐点为实心圆
      symbol:'circle',   
    },
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};