一、常见的前端图形化的库

（1）ECharts 一个基于 JavaScript 的开源可视化图表库

echarts.apache.org/zh/index.ht…

（2）Three.js 实现的 3D 可视化库，基于 WebGL

（3）AntV 蚂蚁集团全新一代数据可视化解决方案

（4）D3js 自定义程度更高 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。

www.d3js.org.cn/

highcharts （商业授权）兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库；成熟稳定的商业软件，72 个全球 100 强企业共同的信任。

www.highcharts.com.cn/

二、5分钟上手ECharts

步骤1：引入echarts.js文件

<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>

步骤2：准备一个呈现图表的盒子

<div style="width: 600px;height: 600px;"  id="time_echars"> </div>

步骤3：初始化echarts实例对象
步骤4：准备配置项
步骤5：将配置项设置给echarts实例对象

<script type="text/javascript">
        //步骤3：初始化echarts实例对象
        var myCharts = echarts.init(document.getElementById('time_echars'));
	//步骤4：准备配置项
        var option = {
                xAxis:{
                        type:'category',
                        data:['我','爱','你'],
                },
                yAxis:{
                        type:'value'
                },
                series:[
                {
                        name:'心动指数',
                        type:'bar',
                        data:[80,90,100]
                }
                ]
        }
        //步骤5：将配置项设置给echarts实例对象
        myCharts.setOption(option);
</script>

三、相关配置和常见图表

title：标题组件
tooltip：提示框组件
legend：图例组件
toolbox：工具栏组件
grid：直角坐标系内绘图网格
xAxis：直角坐标系grid中x轴
yAxis：直角坐标系grid中y轴
series：系列列表，通过type决定图表类型
color：调色盘颜色列表

常见的7种图表类型

图表1：柱状图
图表2：折线图
图表3：散点图
图表4：饼图
图表5：地图
图表6：雷达图
图表7：仪表盘图

四、常见的使用方式

1、y轴数字显示百分比

// y轴数字显示百分比
yAxis: {
    type: 'value',
    minInterval: 1,
    axisLabel: {
        show: true,
        formatter: '{value}%' // 给每个数值添加%
    }
},

2、x轴或者y轴等隐藏

"xAxis": [
      {
        "show" : false, //数轴及数值全都隐藏
        "type": "value",
        "name": "销量(kg)",
        "splitLine": {
          "show": false
        }
      }
    ]
    
"axisLine":{       //只隐藏数轴
      "show":false
    },
    
"axisTick":{       //隐藏刻度线
        "show":false
      },
      
"splitLine": {     //隐藏网格线
    "show": false
 }

3、设置x轴倾斜

axisLabel: {  
   interval:0,  //x轴全部展示
   rotate:40    //倾斜40度
}

4、调整和设置整个图标的位置

 grid: {
      x: 80,  //左
      y: 60,  //上
      x2: 80, //右
      y2: 80  //下
     },

5、修改柱状图柱子的宽度

series: [{ 
    data: [60, 73, 80, 79, 90],
    type: 'bar',
    barWidth : 60//设置柱图宽度
}]

五、Echars 使用过程中遇到的难点总结

最近在使用echars，遇到一些棘手的问题，官方文档也没找到解决答案，搜索了很多文档，很难找到，经过一下午的时间，终于找到了解法，记录下来，如果你也遇到类似情况，希望能再第一时间帮到你。

1、Echarts 如何让 legend的图标在多行中居上

在这里插入图片描述 2011和2022是多行的时候，如何让图标和第一行平行展示，而不是在多行的居中展示，无特殊处理的情况下，展示如图：请添加图片描述

this.option['legend'] = {
        left: 0,
        bottom: 14,
        itemWidth: 10,
        itemHeight: 10,
        itemGap:32,
        data: [{name:"2011"}, {name:"2022"}],
        formatter: function (name) {
          return `${name}Includesapp,\n website, \naffiliateetworks`
        },
        textStyle: {
          color: '#10024A',
          fontSize: 12,
          fontWeight:400,
          lineHeight:16,
          fontStyle:'normal',
          fontFamily:'Noto Sans',
          backgroundColor: "transparent",
        },
      }

如何让方形icon在第一行展示，需要特殊处理，直接上代码：请添加图片描述代码书写方式：

 this.option['legend'] = {
        left: 0,
        bottom: 14,
        itemWidth: 10,
        itemHeight: 10,
        itemGap:32,
        data: [{name:"2011"}, {name:"2022"}],
        formatter: function (name) {
           if(name == '2011'){
              return [
                `{name|${name}}`,
                "{desc|(Includesapp affiliate}",
                `{others|etworks)}`,].join("\n");
            } else if(name == '2022'){
              return [
                `{name| ${name}}`,
                "{desc|(Includes restaurant website, social}",
                `{others|etworks)}`,].join("\n");
              }
        },
        textStyle: {
          color: '#10024A',
          fontSize: 12,
          fontWeight:400,
          lineHeight:16,
          fontStyle:'normal',
          fontFamily:'Noto Sans',
          backgroundColor: "transparent",
          rich: {
            name:{padding: [30, 0, 0, 0]},
            desc: { padding: [30, 0, 0, 0]},
            others: { padding:[30, 0, 0, 0]},
          },
        },
      }

2、toolTips的大小和样式问题

（1）问题：echarts中，提示框过大，跑到屏幕外。解决方案：通过设置位置，添加额外样式

tooltip.extraCssText

tooltip: {
    trigger: 'item',
    extraCssText: 'width:100px;height:50px;',
    formatter: "{a} <br/>{b} : {c}", 
    //{a}（系列名称），{b}（数据项名称），{c}（数值）
}

echarts.apache.org/zh/option.h…

（2）问题：tooltip里面文字原有的样式无法修改解决方案：在formatter里面添加span并设置好颜色

tooltip.formatter

tooltip: {
  show: true,
  backgroundColor: "#FFF",
  borderColor: "#C3CBD6",
  borderWidth: 1,
  axisPointer: { lineStyle: { color: "#C3CBD6" } },
  padding: [0, 20],
  formatter: '<span style="color: #666666;">{a} <br/>{b}</span>'
}

echarts.apache.org/zh/option.h…

（3）tooltips显示百分号

// tooltip 显示百分号
tooltip: {
    trigger: 'axis',
    formatter: params => {
        let html = `${params[0].name}<br>`;
        for (let i = 0; i < params.length; i++) {
            html += `${params[i].seriesName}:${params[i].value}`;
        }
        return html;
    }
},

六、Echarts的常用方法的初始化和销毁

1、setOption(option,{boolean = true})

1)第一个参数option，配置图标实例可配置选项

2)第二个表示是否合并option，默认false，多次调用时option选项是默认合并的，设置为true时阻止与上次option合并

2.on(eventName,function) 事件绑定

3.un(eventName,function) 解除某个事件的绑定

4.showLoading(option) 过渡控制

myChart.showLoading({
  text:"数据加载中",
  x:"center",
  y:"center",
  textStyle:{
    color:"red",
    fontSize:14
  },
  effect:"spin"
})

5.hideLoading()隐藏过渡信息提示

//隐藏loading
　　myChart.hideLoading();

6.getDataURL(string imgType)

获取当前图标的Base64图片dataURL,imgType图片类型，支持png/jpeg var imgUrl = myChart.getDataURL("1.png")

7.getImage

获取当前图表的img，imgType图片类型，支持png/jepg
var imgObj = myEchart.getImage("1.jepg"),主要是得到一个图片对象，然后获取其outerHTML属性就是一个图表image的html

8.clear() 清空绘画内容，并非释放实例资源

9.dispose() // 释放图表实例

七、Echarts 相关链接

官网
echarts.apache.org/zh/index.ht…

官网给出好多示例的链接：点这里

echarts 优点
开源免费，社区活跃多种数据格式支持移动端优化，跨平台使用丰富的可视化类型，功能丰富绚丽的特效，强劲的渲染引擎详细的文档说明

常见的前端图形化库，5分钟上手Echars，以及使用的问题总结