介绍

在项目中经常会遇到数据可视化的需求，目前接触到的可视化库有三个：

三个库D3可扩展性最强，其他两个类似。那么项目实践中如何选型？

如果初次接触可视化，且开发时间短、无太多定制需求，建议用echarts，因为有很多示例，更改数据后可以直接使用，即便对个中原理不甚了解；

但感觉echarts API文档很混乱，并且在Github上就问题的讨论常常无疾而终或者很不详细，如果对echarts/Chart这类可视化库感兴趣，可以参考chart的文档；

如果有足够的时间和兴趣研究可视化，推荐D3，学习曲线很陡，但可定制和扩展性强，并且Github社区讨论活跃，不乏高质量问答。

没错，时间多用D3，时间少用echarts，chart仅仅看文档学习用。。。

echarts

目前使用的是echarts，将常用功能总结如下：

1，引入echarts库

<script src="[yourpath]/echarts.min.js"></script>

2，初始化

在html中设置图表容器

<div id="chartName" style="width: 100%;height:400px;"></div>

注意，这里的width设为100%，主要为图表自适应做准备

在js中基于准备好的DOM，初始化echarts实例

var chartName = echarts.init(document.getElementById('chartName'));

3，配置项和数据显示（修改样式）

去到echarts实例页面，将需要的图表配置项和数据源码插入自己的js文件中，在此基础上修改就可以了。

这里以折线图为例对配置项和数据代码进行说明：

option = {
  // 设置标题
  title: {
    text: '未来一周气温变化',
    subtext: '纯属虚构',

    // 设置背景色
    backgroundColor: '#0ff',

    // 通过textStyle设置标题字体样式
    textStyle: {
      color: '#408829'  
    }
  },

  // 跟踪鼠标，显示相关数据
  tooltip: {
    trigger: 'axis'
  },

  // 线条名称说明，注意和series数组中元素一一对应，且和对象元素的name属性值保持一致
  legend: {
    data:['最高气温','最低气温']
  },

  // 右上角小工具，比如下载图片，缩放图表等
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: {readOnly: false},
      magicType: {type: ['line', 'bar']},
      restore: {},
      saveAsImage: {}
    }
  },

  // x坐标轴
  xAxis:  {
    type: 'category',

    // boundaryGap设为ture，图标左边与y轴有间隙
    boundaryGap: false,
    data: ['周一','周二','周三','周四','周五','周六','周日'],

    // 定制坐标轴颜色
    axisLine:{
      lineStyle:{  
        color:'green',  
        width:2  
      }  
    },  
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },

  // 图表数据部分
  series: [
  {
    // 此处name与legend中data数组元素有对应关系
    name:'最高气温',

    // 图表类型
    type:'line',

    // 图标数据
    data:[11, 11, 15, 13, 12, 13, 10],

    /**
     * label和markPoint/markLine一般二选一，不会全部显示 begin
     */

     label: {
      normal: {
        // 是否显示转折点数值
        show: true
      }
    },

    // 设置特殊点标记
    markPoint: {
      data: [
      {type: 'max', name: '最大值'},
      {type: 'min', name: '最小值'}
      ]
    },

    // 设置特殊线标记
    markLine: {
      data: [
      {type: 'average', name: '平均值'}
      ]
    },

    // 设置线条样式
    itemStyle:{
      normal:{
        color: "#4dcda2"
      }
    }
  }
  ]
};

4，使用配置项和数据

chartName.setOption(option);

5，自适应

// resizeTimer为节流定时器
var resizeTimer = null;
window.onresize = function () {
  if (resizeTimer) {
    clearTimeout(resizeTimer);
  }
  resizeTimer = setTimeout(function () {
    // 在图表上设置resize方法，配合html中设置的图标width为100%，便可实现自适应
    chartName.resize();
  }, 200);
};

6，多个图表

如果同个页面中包含个图表，在上述配置项中针对不同图表设置不同名称就好，具体可参考Github上这个仓库echarts_example。

参考资料

【1】Comparison between d3.js and chart.js (only for charts)
【2】Echarts字体和线条颜色设置操作笔记