ECharts案例教程1

矫情吗；* 2022-08-06 10:21 260阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

早上起来闲逛[codops][]，在它的[Web Design & Development News: Collective \#149 | Codrops][Web Design _ Development News_ Collective _149 _ Codrops]发现了来自百度的数据可视化工具[Echarts][]，貌似功能强大，自己尝试着学习下，顺便给大家梳理Echarts案例教程系列文章，欢迎大家点赞拍砖！

![Center][]

## 简介 ##

ECharts，缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，业界给予了很多赞誉，这里不多说，需要了解详情的同学参见官网。我简略看了下，最贴切的地方在于本地化支持，比如对于中国地图的支持。

## 案例欣赏 ##

\-----------------------

\--------------------------------------------------------------

===案例一 [简单条形图][Link 1]===案例二  [条形、折线图混搭][Link 2]===

\--------------------------------------------------------------

\----------------------

## 具体实现 ##

###    简单条形图 ###

先来一个最简单的案例，实现一个条形图，代码我放在codepen哟，大家可以移步[预览效果][Link 1]先。

![Center 1][]

预先准备好具有宽和高的网页元素，我们将用它绘制数据表。

然后我们导入Echarts类库，做好准备。

然后就是重头戏，我们来绘制数据表，首先配置路径，接着使用Echarts开始绘图。

// 路径配置
    require.config({
      paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
      }
    });
    
    // 使用
    require(
      [
        'echarts',
        'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
      ],
      function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('main')); 
        //设置数据
        var option = {
          
        };
    
        // 为echarts对象加载数据 
        myChart.setOption(option); 
      }
    );

重点是option里的设置，设置坐标轴、设置数据。

var option = {
          //设置坐标轴
          xAxis : [
            {
              type : 'category',
              data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          //设置数据
          series : [
            {
              "name":"销量",
              "type":"bar",
              "data":[5, 20, 40, 10, 24, 20,24,32],
            }
          ]
        };

![Center 2][]

我们可以设置图标标题、图例、提示等，代码如下，效果如下图所示。

var option = {
          //设置标题
          title:{
            text:'销量图',
            subtext:'纯属捏造，如有雷同，人品爆发。'
          },
          //设置提示
          tooltip: {
            show: true
          },
          //设置图例
          legend: {
            data:['销量']
          },
          //设置坐标轴
          xAxis : [
            {
              type : 'category',
              data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          //设置数据
          series : [
            {
              "name":"销量",
              "type":"bar",
              "data":[5, 20, 40, 10, 24, 20,24,32],
            }
          ]
        };

![Center 3][]

======================ok，华丽的分割线，之后我来点复杂的==========================

###     条形图折线图混搭 ###

加点料，来电混搭，直线图加上条形图，同时画平均线、提示最大最小值，同样代码放在codepen，移步[预览效果][Link 2]先。

![Center 4][]

当我们需要混搭的时候，首先需要在require里加载需要使用的图库，然后在series里填写折线图的数据就可以了。代码如下，因为注释已经写得很清楚了，就不在啰嗦了，大家直接研究代码。

// 路径配置
    require.config({
      paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
      }
    });
    
    // 使用
    require(
      [
        'echarts',
        'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
        'echarts/chart/line'
      ],
      function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('main')); 
    //设置数据
        var option = {
          //设置标题
          title:{
            text:'销量图',
            subtext:'纯属捏造，如有雷同，人品爆发。'
          },
          //设置提示
          tooltip: {
            show: true
          },
          //设置图例
          legend: {
            data:['销量']
          },
          //设置坐标轴
          xAxis : [
            {
              type : 'category',
              data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          //设置数据
          series : [
            //条形图
            {
              "name":"销量",
              "type":"bar",
              "data":[5, 20, 38, 10, 24, 20,24,32]
            },
            //折线图
             {
              "name":"销量",
              "type":"line",
              "data":[5, 20, 38, 10, 24, 20,24,32],
               //绘制平均线
               markLine : {
                 data : [
                   {type : 'average', name: '平均值'}
                 ]
               },
              //绘制最高最低点
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              }
            }
          ]
        };
    
        // 为echarts对象加载数据 
        myChart.setOption(option); 
      }
    );

好了，挺长了，我们下次再研究。

\----------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[codops]: http://tympanus.net/codrops/
[Web Design _ Development News_ Collective _149 _ Codrops]: http://tympanus.net/codrops/collective/collective-149/
[Echarts]: http://echarts.baidu.com/
[Center]: /images/20220806/89230781d03944ce8b3a06209c05ac98.png
[Link 1]: http://codepen.io/whqet/pen/JoWbGx
[Link 2]: http://codepen.io/whqet/pen/OPpXKd?editors=001
[Center 1]: /images/20220806/fb7bdf60c0c04828a5d3394376b085ad.png
[Center 2]: /images/20220806/11df4e800f4b46ca9079734d766d3bbd.png
[Center 3]: /images/20220806/90f7d30d6bad4c55bf40435d30ebbdc9.png
[Center 4]: /images/20220806/c83e6b8f525842e6a95cb18c7a7bc703.png
[whqet]: http://blog.csdn.net/whqet