ECharts使用步骤（五部曲）

简介：

一个适应javascript实现的开源可视化库（js插件）。可以流畅的运行在PC端和移动端上，兼容当前大部分浏览器（ie8及以上），底层依赖矢量图形库ZRender，提供直观、交互丰富、可高度自定义化的数据可视化图表。

使用步骤（五部曲）：

1、下载并引入echarts.js文件

2、准备一个具备大小（确定宽高）div容器用来装图表

3、初始化echarts实例对象 ： echarts.init(dom容器)

4、指定配置项和数据（option）

5、将配置项设置给echarts实例对象 ：myBarLfet.setOption(option);

图表结构介绍图：

    <!-- 图表名 -->

    <h2>柱状图-就业行业</h2>

    <!-- 内容 -->

    <div class="chart"></div>

    <!-- 创建一个空标签，解决下面两个小直角 -->

    <div class="panel-footer"></div>

  </div>

// 初始化echarts实例对象

var myBarLfet = echarts.init(document.querySelector('.bar-left'));

// 指定配置项和数据

var option = {

  color: ['#3398DB'],

  // 图表提示框组件

  tooltip: {

    // 触发方式：axis坐标轴，可看配置项手册

    trigger: 'axis',

    axisPointer: {            // 坐标轴指示器，坐标轴触发有效

      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

    }

  },

  // 图例组件

  // legend:{

  //   data:[]

  // },

  // 工具箱组件：下载图表为图片

  toolbox: {

    feature: {

        saveAsImage: {}

    }

},

// 网格配置：控制图表的范围/大小

  grid: {

    left: '3%',

    right: '4%',

    bottom: '3%',

    // containLabel：刻度显示

    containLabel: true

  },

  // 横坐标

  xAxis: [

    {

      type: 'category',

      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

      axisTick: {

        alignWithLabel: true

      }

    }

  ],

  // 纵坐标

  yAxis: [

    {

      type: 'value'

    }

  ],

  // 系列图表配置

  series: [

    {

      name: '直接访问',

      type: 'bar',

      barWidth: '60%',

      data: [10, 52, 200, 334, 390, 330, 220]

    }

  ]

};

// 将配置项给实例对象

myBarLfet.setOption(option);

坐标轴修改字体颜色：

axisLabel: {

    color: '#4c9bfd' // 文本颜色

  }

其他修改字体：

textStyle: {

    color: ' #4c9bfd',

  }

分割线设置：

splitLine:{

    lineStyle: {

      color: '#012f4a'

    }

  }