Echarts常用配置文件

配置项

title-text：'表格标题'

axisLabel-color:'red'  设置X轴Y轴字体颜色

grid-left  设置图表本身便宜位置

legend-top  设置图列位置

tooltip-trigger  设置鼠标移入图表提示框

toolbox  工具栏配置

lineStyle-color  折线图折现颜色

xAxis——axisLine-show  是否显示X轴

xAxis——axisLine-lineStyle-color   width  type  interval  设置X轴字体颜色  x轴宽度  X轴线类型  X轴间隔 为0 不省略

Y轴类似

let chartDom = document.getElementById('myEcharts');//获取EchartsDom容器
let myChart = echarts.init(chartDom);//注入dom
myChart.setOption(option);//注入参数生成图表

示例Echarts 以及option 

1、折线图

 

option = {
  title: {
    text: '标题' //标题名称
  },
  axisLabel: {
    color: 'red' //设置X轴Y轴颜色
  },
  grid: {
    //图表本身偏移位置
    left: '3%', //向左偏移
    right: '4%',
    bottom: '3%',
    containLabel: true //是否有内边距
  },
  legend: {
    //图列
    top: '5%', //图列位置
    right: '4%',
    // show: false, //是否显示图列
    data: ['aSeries'] //图列数据 和series中name对应
  },
  tooltip: {
    trigger: 'axis' //是否显示鼠标移入提示框
  },
  toolbox: {
    //工具栏
    feature: {
      saveAsImage: {}
    }
  },

  lineStyle: {
    color: '#236BFF' //线条颜色
  },
  xAxis: {
    type: 'category',
    data: ['一', '二', '三', '四', '五', '六', '七'],
    axisLine: {
      //x轴线的颜色以及宽度
      show: true, //是否显示
      lineStyle: {
        color: '#999999', //单独 X轴字体颜色
        width: 0, //x轴线宽度
        type: 'solid', //x轴线类型
        interval: 0 //主要设置其间隔，间隔为3  X轴刻度间隔 0为全部显示？
      }
    }
  },

  yAxis: {
    type: 'value',
    axisLine: {
      show: true, //是否显示
      lineStyle: {
        color: '#999999', //单独 y轴字体颜色
        width: 0, //y轴线宽度
        type: 'solid' //y轴线类型
      }
    }
  },
  series: [
    {
      name: 'aSeries', //数据名称
      data: [10, 20, 30, 40, 80, 50, 680],
      areaStyle: {
        //是否显示线条下方颜色  去除属性则不显示
        opacity: 1,
        // 颜色配置
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#2597fa'
          },
          {
            offset: 0.5,
            color: '#2597fa96'
          },
          {
            offset: 1,
            color: '#2597fa00'
          }
        ])
      },
      type: 'line',
      smooth: true, //是否为弧线 还是折线
      // symbol: 'none',//是否显示折点数据
      symbolSize: 5, //设置折线上圆点大小
      itemStyle: {
        normal: {
          label: {
            color: '#236BFF', //折线点上颜色
            fontSize: '15', //折现点上字体大小
            show: true // 在折线拐点上显示数据
          }
        }
      },
      lineStyle: {
        width: '4', //折线宽度
        // 阴影部分
        shadowOffsetX: 0, // 阴影折线的X偏移
        shadowOffsetY: 5, // 阴影折线的Y偏移
        shadowBlur: 5, // 阴影折线模糊
        shadowColor: 'rgba(145, 132, 132, 1)' //阴影折线颜色
      }
    }
  ]
};

2、柱状图

option = {
  axisLabel: {
    color: '#9AD9EA' //文字颜色
  },
  legend: {
    textStyle: {
      fontSize: '15',
      color: '#CCC'//图列字体颜色
    },
    itemHeight: 10, //图例图标的高度
    itemWidth: 15, //图例图标的宽度
    itemGap: 20 //图例图标与文字间的间距
  },
  grid: {
    //图表位置
    top: '10%',
    left: '5%',
    containLabel: true
  },
  xAxis: [
    {
      axisLine: {
        show: false //不显示坐标轴线
      },
      axisTick: {
        show: false //不显示坐标轴刻度线
      },
      type: 'category',
      max: 10, //柱子间距
      axisLabel: {
        interval: 0, //不省略 X轴
        rotate: 40 //Y轴字体倾斜
      },
      data: ['一月', '二月', '三月', '四月', '五月', '六月']
    }
  ],
  yAxis: [
    {
      splitLine: {
        // 设置y轴 辅助线
        lineStyle: {
          color: '#d7d7d786',//辅助线颜色
          type: 'dashed' //虚线
        },
        show: true //隐藏
      },
      type: 'value'
    }
  ],
  series: [
    {
      name: '已调解',
      type: 'bar',
      color: '#04FEFE',
      stack: 'Ad', //保持一致 则可以叠加柱状图
      barWidth: 11, // 柱子宽度
      emphasis: {
        focus: 'series'
      },
      data: [10, 50, 80, 60, 80, 60]
    },
    {
      name: '总数',
      type: 'bar',
      color: '#388EFB',
      barWidth: 11, // 柱子宽度
      stack: 'Ad', //保持一致 则可以叠加柱状图
      emphasis: {
        focus: 'series'
      },
      data: [50, 40, 80, 70, 80, 70]
    }
  ]
};