目录

前言 1.1

ECharts概览 1.2

ECharts上手 1.3

ECharts实例 1.4

柱状图 1.4.1

饼图 1.4.2

星状图 散列图 1.4.3

ECharts开发 1.5

ReactJS 1.5.1

示例 1.5.1.1

心得 1.5.1.2

ECharts心得 1.6

附录 1.7

参考资料 1.7.1

前言

流行的JS图表库：ECharts

最新版本：v1.0

更新时间：20210916

简介

介绍JS图形库中比较好用的一个ECharts。先进行ECharts概览；再介绍如何上手ECharts；再给出常见的实例，包括柱状图、饼图、星状图等；以及给出ECharts开发期间的心得，包括ReactJS中如何用ECharts，以及相关的实例和心得。

源码+浏览+下载

本书的各种源码、在线浏览地址、多种格式文件下载如下：

Gitbook源码

crifan/popular_js_chart_lib_echarts: 流行的JS图表库：ECharts

如何使用此Gitbook源码去生成发布为电子书

详见：crifan/gitbook_template: demo how to use crifan gitbook template and demo

在线浏览

流行的JS图表库：ECharts book.crifan.com

流行的JS图表库：ECharts crifan.github.io

离线下载阅读

流行的JS图表库：ECharts PDF

流行的JS图表库：ECharts ePub

流行的JS图表库：ECharts Mobi

版权说明

此电子书教程的全部内容，如无特别说明，均为本人原创和整理。其中部分内容参考自网络，均已备注了出处。如有发现侵犯您版权，请通过邮箱联系我 admin 艾特 crifan.com，我会尽快删除。谢谢合作。

鸣谢

感谢我的老婆陈雪的包容理解和悉心照料，才使得我crifan有更多精力去专注技术专研和整理归纳出这些电子书和技术教程，特此鸣谢。

更多其他电子书

本人crifan还写了其他100+本电子书教程，感兴趣可移步至：

crifan/crifan_ebook_readme: Crifan的电子书的使用说明

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-16 08:49:13

ECharts概览

ECharts概览

一句话描述：ECharts是一个使用JavaScript实现的功能极其丰富的开源可视化库

最大特点：涵盖各行业图表，满足各种需求

历史：

最早是百度开发的

旧版是v2系列，后来升级到v3，以及之后的v4

但现在旧版网页均已不在，都合并到Apache中了

后来归入Apache组织

ECharts 遵循 Apache-2.0 开源协议，免费商用

主页

Apache ECharts

https://echarts.apache.org/zh/index.html

GitHub

apache/incubator-echarts: A powerful, interactive charting and visualization library for browser

https://github.com/apache/incubator-echarts

浏览器支持

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备

特性

丰富的可视化类型

提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

多种数据格式无需转换直接使用

内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。

千万数据的前端展现

通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。

移动端优化

针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。

多渲染方案，跨平台使用

支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。

深度的交互式数据探索

提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

多维数据的支持以及丰富的视觉编码手段

对于传统的散点图等，传入的数据也可以是多个维度的。

动态数据

数据的改变驱动图表展现的改变。

绚丽的特效

针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。

通过 GL 实现更多更强大绚丽的三维可视化

在 VR、大屏场景里实现三维的可视化效果。

无障碍访问（4.0+）

支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-15 15:26:00

ECharts上手

ECharts使用

教程资料

最常用的资料

5 分钟上手 ECharts

https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

如果想要看具体的不同图表的效果，则去

官网的例子

ECharts Demo

https://echarts.apache.org/examples/zh/index.html

网友的例子：叫做GL=Gallery（画廊）=例子的集合

Make A Pie

https://www.makeapie.com/explore.html

如果想要涉及到和图表中的交互，初始化等，则去看：

ECharts的API

https://echarts.apache.org/zh/api.html#echarts

设置option时参考的官网文档

ECharts Documentation

https://echarts.apache.org/zh/option.html#series-bar.barWidth

查看参数配置

如果涉及到对于不同的图表类型

想要

知道有哪些参数

不同参数具体如何设置

那么去

ECharts的配置项

https://echarts.apache.org/zh/option.html

比如：

想要查看烛台 candlestick的图的配置参数有哪些时，可以找到对应位置：

https://echarts.apache.org/zh/option.html#series-candlestick

接着就可以一点点找到自己要配置的参数了

编辑源码实时查看效果

不论是ECharts官网还是ECharts Gallery

进去单个页面后，都可以编辑左边的代码，点击运行，右边可以看到实时的效果：

比如：

https://echarts.apache.org/examples/zh/index.html#chart-type-sunburst

[echarts_chart_type_sunburst

点击其中的图表，可以进入具体页面：

https://echarts.apache.org/examples/zh/editor.html?c=sunburst-drink

可以根据需要，去左边直接修改代码，点击运行后，即可在右边看到最新效果：

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-16 08:42:05

ECharts实例

ECharts实例

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-15 15:10:12

柱状图

柱状图

柱状图 带折线 - 通话统计

代码：

option = {
  title: {
    left: 'top',
    text: '陈岩石通话统计',
    show: true
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{a}:{c}',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  // grid: {
  //   show: false,
  //   top: '30',
  //   bottom: '60',
  //   right: '60',
  //   left: '60'
  // },
  legend: {
    show: true,
    selectedMode: 'single', //设置显示单一图例的图形，点击可切换
    bottom: 10,
    left: 50,
    textStyle: {
      color: '#666',
      fontSize: 12
    },
    itemGap: 20,
    data: ['陈岩石'],
    inactiveColor: '#ccc'
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '07/01', '07/02', '07/03', '07/04', '07/05', '07/06', '07/07', '07/08', '07/09', '07/10',
        '07/11', '07/12', '07/13', '07/14', '07/15', '07/16', '07/17',
      ],
      axisPointer: {
        type: 'shadow'
      },

      axisTick: {
        show: true,
        interval: 0
      },
    }
  ],

  //设置两个y轴，左边显示数量，右边显示概率

  yAxis: [{
      type: 'value',
      name: '通话分钟',
      show: true,
      interval: 5,
    },
    {
      type: 'value',
      name: '通话次数',
      min: 0,
      max: 20,
      interval: 2,
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],

  //每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换

  series: [
    {
      name: '陈岩石',
      type: 'bar',
      data: [
        70, 68, 65, 64, 60, 57, 68, 65, 64, 60, 57, 45, 40, 38, 30, 90, 80
      ],
      barWidth: '50%',
      itemStyle: {
        normal: {
          color: "SlateBlue"
        }
      }
    },
    {
      name: '陈岩石',
      type: 'line',
      yAxisIndex: 1,
      data: [14, 13, 17, 8, 9, 11, 11, 9, 15, 20, 14, 7, 8, 10, 13, 15, 16],
      symbolSize: 10,
      itemStyle: {
        normal: {
          color: "Fuchsia"
        }
      }
    },
  ]
};

效果：

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-15 15:08:54

饼图

饼图

矿泉水成本占比

配置代码：

option = {
    title: {
        text: '矿泉水成本占比图',
        textStyle: {
            color: "#0649BD",
            fontSize: 28,
        },
        subtext: '单瓶 550mL 零售价=1.5元',
        subtextStyle : {
            fontSize: 18,
            color: "purple",
        },
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        data: ['水(本身)', '瓶子、盖、喷码、胶带', '广告运营费', '厂家(利润)', '经销商(利润)', '超市(利润)']
    },
    series: [
        {
            name: '矿泉水成本占比',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'outside', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                    formatter:'{b}：{c}元 {d}%'
                }
            },
            data: [
                {value: 0.01, name: '水(本身)'},
                {value: 0.17, name: '瓶子、盖、喷码、胶带'},
                {value: 0.22, name: '广告运营费'},
                {value: 0.20, name: '厂家(利润)'},
                {value: 0.40, name: '经销商(利润)'},
                {value: 0.50, name: '超市(利润)'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

效果：

饼图向左移动

代码：

    series: [{
      type: 'pie',
      center: ["40%", "55%"],
      ...

效果：

外层圆环内层扇区的饼图

代码：

        <div class="col-md-">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">批售</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="echart_wholesales" style="height:220px;" ></div>
              <div style="text-align:center;">
                  <p>
                    月目标<span class="label label-primary">12000</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    完成率<span class="label label-primary">67%</span>
                  </p>
              </div>
            </div>
          </div>
        </div>

<script type="text/javascript">
  var wholesalesEcharts = echarts.init(document.getElementById('echart_wholesales'));
  option = {
    title: {
        text: "",
        subtext: "",
        left: "center",
        textStyle: {
            color: "#fff",
            fontSize: 18
        },
    },
    backgroundColor: '#ffffff',
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}:({d}%)"
    },
    series: [{
        name: '批售详细数据',
        type: 'pie',
        radius: ['0%', '60%'],
        // color: ['#ec5d51', '#59abe1', '#f4cf42', '#3dc6a8'],
        color: ['#5DADE2', '#884EA0', '#F5B041', ],
        // color: ['#FDFEFE', '#28B463'],
        // color: ['#a0dca0', '#60bbb6', '#f78db3'],
        label: {
            normal: {
                position: 'inner',
                formatter: '{b}\n{c}'
            }
        },
        data: [
          {
              value: 6000,
              name: '已批售'
          },
          {
              value: 2000,
              name: '今日批售'
          },
          {
              value: 4000,
              name: '缺口'
          },
        ]
    }, {
        name: '批售总体数据',
        type: 'pie',
        radius: ['60%', '70%'],
        labelLine : {
          normal : {
            length : 1,
            length2 : 1
          }
        },
        //color: ['#a0dca0', '#60bbb6', '#f78db3', '#feadac', '#fae395′,'#91d4e5′,'#8eb3e8'],
        color: ['#28B463', '#FDFEFE'],
        label: {
            normal: {
               formatter: '{b}\n{c}'
            }
        },
        data: [
          {
              value: 8000,
              name: '已完成'
          },
          {
              value: 4000,
              name: '缺口'
          }
        ]
    }]
};
wholesalesEcharts.setOption(option);
</script>

效果：

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-15 17:25:27

星状图 散列图

星状图 散列图 树状图

sunburst-book

地址：

Examples - Apache ECharts (incubating)

https://echarts.apache.org/examples/zh/editor.html?c=sunburst-book

效果：

星状图 放射状 人物关系图

人物关系图

代码：

option = {
    title: { text: '联系人图谱' },
    tooltip: {
        formatter: function (x) {
            return x.data.des;
        }
    },
    series: [
        {
            type: 'graph',
            layout: 'force',
            symbolSize: 80,
            roam: true,
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            // draggable: true,
            draggable: false,
            itemStyle: {
                normal: {
                    color: '#4b565b'
                }
            },
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b'

                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                    }
                }
            },
            data: [
                {
                    name: '我',
                    des: '',
                    symbolSize: 100,
                    itemStyle: {
                    normal: {
                        color: 'red',
                    }
                }
                },
                {
                    name: '侯亮平',
                    des: '',
                    symbolSize: 40,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '祁同伟',
                    des: '',
                    symbolSize: 50,
                    itemStyle: {
                    normal: {
                        color: 'blue'
                    }
                }
                },
                {
                    name: '高小凤',
                    symbolSize: 50,
                    itemStyle: {
                    normal: {
                        color: 'blue'
                    }
                }
                },
                {
                    name: '吴惠芬',
                    des: '',
                    symbolSize: 70,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '陈海',
                    des: '',
                    symbolSize: 60,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '赵东来',
                    des: '',
                    symbolSize: 60,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '梁璐',
                    des: '',
                    symbolSize: 60,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '陈岩石',
                    des: '',
                    symbolSize: 70,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '李达康',
                    des: '',
                    symbolSize: 60,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '高小琴',
                    des: '',
                    symbolSize: 50,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '陆亦可',
                    des: '',
                    symbolSize: 50,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '吴心怡',
                    des: '',
                    symbolSize: 40,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
            ],
            links: [
                {
                    source: '我',
                    target: '侯亮平',
                    name: '',
                    des: '侯亮平是我的得意门生'
                }, {
                    source: '我',
                    target: '祁同伟',
                    name: ''
                },
                {
                source: '我',
                target: '高小凤',
                name: ""
                },
                {
                source: '我',
                target: '吴惠芬',
                name: ""
                },
                {
                source: '我',
                target: '陈海',
                name: ""
                },
                {
                source: '我',
                target: '赵东来',
                name: ""
                },
                {
                source: '我',
                target: '梁璐',
                name: ""
                },
                {
                source: '我',
                target: '陈岩石',
                name: ""
                },
                {
                source: '我',
                target: '李达康',
                name: ""
                },
                {
                source: '我',
                target: '高小琴',
                name: ""
                },
                {
                source: '我',
                target: '陆亦可',
                name: ""
                },
                {
                source: '我',
                target: '吴心怡',
                name: ""
                },
            ]
        }
    ]
};

效果：

graph-npm

Examples - Apache ECharts

https://echarts.apache.org/examples/zh/editor.html?c=graph-npm

效果：

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-15 15:10:32

ECharts开发

ECharts开发

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-15 15:29:39

ReactJS

ReactJS

安装ECharts

  npm install –save echarts-for-react

用过的好用的封装的库

hustcc/echarts-for-react: baidu Echarts(v3.0) components for React wrapper. 一个简单的 echarts(v3.0) 的 react 封装

https://github.com/hustcc/echarts-for-react

库的demo

echarts-for-react

http://git.hust.cc/echarts-for-react

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-16 08:43:23

示例

示例

ReactJS-AdminLTE

多个图表

某个报表：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>xxx报表</title>
    <!– Tell the browser to be responsive to screen width –>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <!– Bootstrap 3.3.7 –>
            <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
            <!– Font Awesome –>
                <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
                <!– Ionicons –>
                    <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
                    <!– Theme style –>
                        <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
                        <!– AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them
                            to reduce the load. –>
                            <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
                            <!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
                                <!– WARNING: Respond.js doesn't work if you view the page via file:// –>
                                    <!–[if lt IE 9]>
                                        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>;
                                        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>;
                                        <![endif]–>
  <!– Google Font –>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">;
  <style type="text/css">
    .nav-pills > li > a {
      border-radius: 4px 4px 4px 4px;
    }
  </style>
</head>
<!– ADD THE CLASS sidebar-collapse TO HIDE THE SIDEBAR PRIOR TO LOADING THE SITE –>
<body class="hold-transition skin-blue sidebar-collapse sidebar-mini">
<!– Site wrapper –>
<div class="wrapper">
。。。
  <!– Content Wrapper. Contains page content –>
  <div class="content-wrapper">
    <!– Content Header (Page header) –>
    <!– <section class="content-header">
      <h1>
        xxx报表
      </h1>
    </section> –>
    <!– Main content –>
    <section class="content">
      <div class="row">
        <div class="col-md-6">
          <!– <div class="col-md-4 col-sm-4 col-xs-4" style="width: 260px;"> –>
          <div class="col-md-6">
            <div class="box box-solid box-primary">
              <div class="box-header">
                <h5 class="box-title">东南大区 > 上海商务处</h5>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fa fa-times"></i></button>
                </div>
              </div>
            </div>
          </div>

          <!– <div class="col-md-4 col-sm-4 col-xs-4" style="width: 120px;"> –>
          <div class="col-md-3">
            <div class="box box-solid box-primary">
              <div class="box-header">
                <h5 class="box-title">明锐</h5>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fa fa-times"></i></button>
                </div>
              </div>
            </div>
          </div>
          <!– <div class="col-md-4 col-sm-4 col-xs-4" style="width: 120px;"> –>
          <div class="col-md-3">
            <div class="box box-solid box-primary">
              <div class="box-header">
                <h5 class="box-title">DCC</h5>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fa fa-times"></i></button>
                </div>
              </div>
            </div>
          </div>
      </div>

      <div class="col-md-3">
        <div>
        </div>
      </div>
      <!– <div class="col-md-4">
          <div class="col-md-6">
            <button type="button" class="btn btn-block btn-info">目标达成</button>
          </div>
          <div class="col-md-6">
            <button type="button" class="btn btn-block btn-info">同环比</button>
          </div>
      </div> –>
      <div class="col-md-3">
        <div class="col-md-3">
          <div>
          </div>
        </div>

        <div class="col-md-9">
          <!– <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">目标达成</a></li>
              <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="true">同环比</a></li>
            </ul>
          </div> –>
          <ul class="nav nav-pills">
            <li class="active">
              <a href="#target_complete" data-toggle="tab">目标达成</a>
            </li>
            <li>
              <a href="#yoy" data-toggle="tab">同环比</a>
            </li>
          </ul>
        </div>
      </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">区域</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="echart_map" style="width: 100%; height:250px;transform: scale(1.2, 1.2);" >
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">车型</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div class="box-body no-padding">
                <table class="table table-striped">
                  <tr>
                    <td>新明锐</td>
                    <td style="width: 100px">
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-danger" style="width: 45%;">4500</div>
                      </div>
                    </td>
                    <td>10000</td>
                  </tr>
                  <tr>
                    <td>柯迪亚克</td>
                    <td>
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-success" style="width: 100%;">1800</div>
                      </div>
                    </td>
                    <td>600</td>
                  </tr>
                  <tr>
                    <td>晶锐</td>
                    <td>
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-yellow" style="width: 65%">780</div>
                      </div>
                    </td>
                    <td>1200</td>
                  </tr>
                  <tr>
                    <td>速派</td>
                    <td>
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-success" style="width: 87%">3480</div>
                      </div>
                    </td>
                    <td>4000</td>
                  </tr>
                  <tr>
                    <td>野帝</td>
                    <td>
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-success" style="width: 91%">1001</div>
                      </div>
                    </td>
                    <td>1100</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-3">
            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">渠道</h3>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                  <i class="fa fa-minus"></i></button>
                </div>
              </div>
              <div class="box-body">
                <div class="box-body no-padding">
                  <table class="table table-striped">
                    <tr>
                      <td>DCC</td>
                      <td style="width: 100px">
                        <div class="progress progress-striped active">
                          <div class="progress-bar progress-bar-danger" style="width: 65%;">50000</div>
                        </div>
                      </td>
                      <!– <td><span class="badge bg-red">80000</span></td> –>
                      <td>80000</td>
                    </tr>
                    <tr>
                      <td>到店</td>
                      <td>
                        <div class="progress progress-striped active">
                          <div class="progress-bar progress-bar-success" style="width: 87%;">7000</div>
                        </div>
                      </td>
                      <!– <td><span class="badge bg-green">8000</span></td> –>
                      <td>8000</td>
                    </tr>
                    <tr>
                      <td>二级网络</td>
                      <td>
                        <div class="progress progress-striped active">
                          <div class="progress-bar progress-bar-yellow" style="width: 70%">1400</div>
                        </div>
                      </td>
                      <!– <td><span class="badge bg-yellow">2000</span></td> –>
                      <td>2000</td>
                    </tr>
                    <tr>
                      <td>外拓</td>
                      <td>
                        <div class="progress progress-striped active">
                          <div class="progress-bar progress-bar-success" style="width: 90%">900</div>
                        </div>
                      </td>
                      <!– <td><span class="badge bg-green">1000</span></td> –>
                      <td>1000</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">转化</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <!– <div id="echart_convertion" style="width: 100%; height:250px; transform: rotate(270deg) scale(0.6, 1.6);" > –>
              <div id="echart_convertion" style="width: 100%; height:250px; transform: scale(1.2, 1.2);" >
              <!– <div id="echart_convertion" style="width: 100%; height:250px;" > –>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">批售</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="echart_wholesales" style="height:220px;" ></div>
              <div style="text-align:center;">
                  <p>
                    月目标<span class="label label-primary">12000</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    完成率<span class="label label-primary">67%</span>
                  </p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-3">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">库存</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="echart_inventory" style="height:220px;" ></div>
              <div style="text-align:center;">
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!– /.content –>
  </div>
  <!– /.content-wrapper –>
<!– Add the sidebar's background. This div must be placed
       immediately after the control sidebar –>
  <div class="control-sidebar-bg"></div>
</div>
<!– ./wrapper –>
<!– ECharts –>
<script src="dist/lib/echarts/echarts.js"></script>
<script src="dist/lib/echarts/map/china.js"></script>
<!– <script src="dist/lib/echarts/china.js"></script> –>
<!– jQuery 3 –>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!– Bootstrap 3.3.7 –>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!– SlimScroll –>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!– FastClick –>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!– AdminLTE App –>
<script src="dist/js/adminlte.min.js"></script>
<!– AdminLTE for demo purposes –>
<script src="dist/js/demo.js"></script>
<script type="text/javascript">

    const ValueColor = {
        RED: '#F56954′, //rgb(245, 105,  84)',
        GRAY: '#D2D654′, //rgb(210, 214,  222)',
        GREEN: '#00A65A', //rgb(0,   166,  90)',
        YELLOW: '#F39C12′, //rgb(243, 156,  18)',
        LIGHT_BLUE: '#00C0EF', //'rgb(0,   192,  239)',
        DARK_BLUE: '#3C8DBC', //'rgb(60,  141,  188)',
        WHITE: '#FFFFFF', //'rgb(255, 255,  255)',
    };
</script>
<script type="text/javascript">
    var mapEcharts = echarts.init(document.getElementById('echart_map'));
    option = {
        title: {
            text: ",
        subtext: ",
        left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data:['2017年']
        },
        visualMap: {
            show: false,
            min: 0,
            max: 500,
            // splitNumber: 250,
            // splitNumber: 100,
            // max: 450,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],           // 文本，默认为数值文本
            calculable: false,
            // calculable: true,
            inRange: {
                //color: [ '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                // color: [ '#FF0033', '#22BF2E']
                //AdminLTE: red, green
                // color: [ '#DD4B39', '#00A65A']
                color: [ValueColor.RED, ValueColor.GREEN],
                //other: red, green
                // color: [ '#FF4500', '#7FFF00'],
                // opacity: 1.0
            }
        },
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         dataView: {readOnly: false},
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        // geo: {
        //   show: true,
        //   map: 'china',
        //   regions: [{
        //       name: '广东',
        //       itemStyle: {
        //           normal: {
        //               areaColor: ValueColor.YELLOW,
        //               // color: ValueColor.YELLOW
        //           }
        //       }
        //   }],
        //   itemStyle: {
        //       normal: {
        //           areaColor: ValueColor.DARK_BLUE,
        //           // borderColor: '#111'
        //       },
        //       emphasis: {
        //         areaColor: ValueColor.DARK_BLUE,
        //       }
        //   }
        // },
        series: [
            {
                name: '2016年',
                type: 'map',
                // type: 'scatter',
                // coordinateSystem: 'geo',
                // mapType: 'china',
                map: 'china',
                roam: false,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [
                    // data: convertData([
                    //大西北区
                    {
                        name: '甘肃',
                        value: 50,
                    },
                    { name: '青海', value: 50 },
                    {
                        name: '新疆',
                        value: 50,
                        // itemStyle: {
                        //   normal: {
                        //     areaColor: ValueColor.YELLOW,
                        //     color: ValueColor.YELLOW,
                        //   }
                        // }
                    },
                    { name: '宁夏', value: 50 },
                    { name: '陕西', value: 50 },
                    { name: '山西', value: 50 },
                    //大中南区
                    { name: '湖南', value: 450 },
                    { name: '江西', value: 450 },
                    { name: '湖北', value: 450 },
                    //大华东区
                    { name: '江苏', value: 450 },
                    { name: '安徽', value: 450 },
                    //大华南区
                    { name: '广东', value: 50 },
                    { name: '海南', value: 50 },
                    { name: '福建', value: 50 },
                    //大华北区
                    { name: '黑龙江', value: 450 },
                    { name: '吉林', value: 450 },
                    { name: '辽宁', value: 450 },
                    { name: '河北', value: 450 },
                    { name: '天津', value: 450 },
                    { name: '北京', value: 450 },
                    { name: '内蒙古', value: 450 },
                    //大华中区
                    { name: '河南', value: 450 },
                    { name: '山东', value: 450 },
                    //大东南区
                    { name: '浙江', value: 450 },
                    { name: '上海', value: 450 },
                    //大西南区
                    { name: '重庆', value: 450 },
                    { name: '四川', value: 450 },
                    { name: '西藏', value: 450 },
                    { name: '云南', value: 450 },
                    { name: '广西', value: 450 },
                    { name: '贵州', value: 450 },
                    { name: '台湾', value: 450 },
                    { name: '香港', value: 450 },
                    { name: '澳门', value: 450 }
                ]
                // ])
            },
        ]
    };
    mapEcharts.setOption(option);
</script>
<script type="text/javascript">
    var convertionEcharts = echarts.init(document.getElementById('echart_convertion'));
    option = {
        title: {
            text: ",
        subtext: "
        },
        tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c}%"
            formatter: "{a} <br/>{b} : {c}"
        },
        // toolbox: {
        //     feature: {
        //         dataView: {readOnly: false},
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        // legend: {
        //     data: ['线索','有望','订单','成交']
        // },
        series: [
            {
                name: '目标',
                type: 'funnel',
                // left: '10%',
                // width: '80%',
                left: '10%',
                width: '70%',
                minSize: '10%',
                maxSize: '100%',
                label: {
                    normal: {
                        formatter: '{c}'
                    },
                    emphasis: {
                        position: 'inside',
                        // formatter: '{b}预期: {c}%'
                        formatter: '{b}目标: {c}'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        opacity: 0.7
                    }
                },
                data: [
                    {
                        value: 80,
                        name: '成交',
                        itemStyle: {
                            normal: {
                                color: ValueColor.GREEN
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c}\n转化率：94%',
                                textStyle: {
                                    color: ValueColor.GREEN
                                }
                            }
                        },
                    },
                    {
                        value: 200,
                        name: '订单',
                        itemStyle: {
                            normal: {
                                color: ValueColor.GREEN
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c}\n转化率：80%',
                                textStyle: {
                                    color: ValueColor.GREEN
                                }
                            }
                        },
                    },
                    {
                        value: 600,
                        name: '有望',
                        itemStyle: {
                            normal: {
                                color: ValueColor.YELLOW
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c}\n转化率：70%',
                                textStyle: {
                                    color: ValueColor.YELLOW
                                }
                            }
                        },
                    },
                    {
                        value: 2000,
                        name: '线索',
                        itemStyle: {
                            normal: {
                                color: ValueColor.RED
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c}\n转化率：50%',
                                textStyle: {
                                    color: ValueColor.RED
                                }
                            }
                        },
                    }
                ]
            },
            {
                name: '实际',
                type: 'funnel',
                // left: '10%',
                // width: '80%',
                // maxSize: '80%',
                left: '10%',
                width: '70%',
                minSize: '5%',
                maxSize: '70%',
                label: {
                    normal: {
                        position: 'inside',
                        // position: 'outside',
                        // formatter: '{c}%',
                        formatter: '{c}',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    emphasis: {
                        position: 'inside',
                        // formatter: '{b}实际: {c}%'
                        formatter: '{b}实际: {c}'
                    }
                },
                itemStyle: {
                    normal: {
                        opacity: 0.5,
                        borderColor: '#fff',
                        borderWidth: 2
                    }
                },
                data: [
                    {
                        value: 75,
                        name: '成交',
                        itemStyle: {
                            normal: {
                                color: ValueColor.GREEN
                            }
                        },
                        // label: {
                        //   normal: {
                        //     position: 'outside'
                        //   }
                        // }
                    },
                    {
                        value: 160,
                        name: '订单',
                        itemStyle: {
                            normal: {
                                color: ValueColor.GREEN
                            }
                        }
                    },
                    {
                        value: 420,
                        name: '有望',
                        itemStyle: {
                            normal: {
                                color: ValueColor.YELLOW
                            }
                        }
                    },
                    {
                        value: 1000,
                        name: '线索',
                        itemStyle: {
                            normal: {
                                color: ValueColor.RED
                            }
                        }
                    }
                ]
            }
        ]
    };
    convertionEcharts.setOption(option);
</script>
<script type="text/javascript">
    var wholesalesEcharts = echarts.init(document.getElementById('echart_wholesales'));
    option = {
        title: {
            text: "",
            subtext: "",
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 18
            },
        },
        backgroundColor: '#ffffff',
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}:({d}%)"
        },
        series: [{
            name: '批售详细数据',
            type: 'pie',
            // radius: ['0%', '60%'],
            radius: ['0%', '58%'],
            // color: ['#ec5d51', '#59abe1', '#f4cf42', '#3dc6a8'],
            color: ['#5DADE2', '#884EA0', '#F5B041',],
            // color: ['#FDFEFE', '#28B463'],
            // color: ['#a0dca0', '#60bbb6', '#f78db3'],
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{b}\n{c}'
                }
            },
            data: [
                {
                    value: 6000,
                    name: '已批售'
                },
                {
                    value: 2000,
                    name: '今日批售'
                },
                {
                    value: 4000,
                    name: '缺口'
                },
            ]
        }, {
            name: '批售总体数据',
            type: 'pie',
            radius: ['60%', '70%'],
            labelLine: {
                normal: {
                    length: 1,
                    length2: 1
                }
            },
            //color: ['#a0dca0', '#60bbb6', '#f78db3', '#feadac', '#fae395′,'#91d4e5′,'#8eb3e8'],
            color: ['#28B463', '#FDFEFE'],
            label: {
                normal: {
                    formatter: '{b}\n{c}'
                }
            },
            data: [
                {
                    value: 8000,
                    name: '已完成'
                },
                {
                    value: 4000,
                    name: '缺口'
                }
            ]
        }]
    };
    wholesalesEcharts.setOption(option);
</script>
<script type="text/javascript">
    var inventoryEcharts = echarts.init(document.getElementById('echart_inventory'));
    option = {
        title: {
            text: "",
            subtext: "",
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 18
            },
        },
        backgroundColor: '#ffffff',
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}:({d}%)"
        },
        series: [
            // {
            //   name: '总部库存',
            //   type: 'pie',
            //   // radius: ['20%', '40%'],
            //   radius: ['20%', '45%'],
            //   // color: [ ValueColor.RED ],
            //   label: {
            //       normal: {
            //           position: 'inner',
            //           formatter: '{b}: {c}\n库存当量: 0.34'
            //       }
            //   },
            //   data: [
            //     {
            //         value: 1438,
            //         name: '总部',
            //         normal: {
            //           color: ValueColor.RED
            //         }
            //     }
            //   ]
            // },
            // {
            //   name: '经销商库存',
            //   type: 'pie',
            //   // radius: ['40%', '60%'],
            //   radius: ['45%', '70%'],
            //   labelLine : {
            //     normal : {
            //       length : 1,
            //       length2 : 1
            //     }
            //   },
            //   color: [ ValueColor.GREEN ],
            //   label: {
            //       normal: {
            //           formatter: '{b}: {c}\n库存当量: 2.31'
            //       }
            //   },
            //   data: [
            //     {
            //         value: 563,
            //         name: '经销商',
            //         // normal: {
            //         //   color: ValueColor.GREEN
            //         // }
            //     }
            //   ]
            // }
            {
                name: '库存系数',
                type: 'pie',
                selectedMode: 'single',
                radius: ['0%', '50%'],
                label: {
                    normal: {
                        position: 'center',
                        formatter: '{a} {c}',
                        textStyle: {
                            // color: '#000000',
                            color: ValueColor.RED,
                            fontSize: 16
                        }
                    },
                    emphasis: {
                        position: 'center',
                        formatter: '{a} {c}',
                        textStyle: {
                            // color: '#000000',
                            color: ValueColor.RED,
                            fontSize: 16
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ECF0F5'
                    }
                },
                data: [
                    {
                        value: '3.4',
                        name: '总部',
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{c} ({d}%)'
                        },
                    }
                ]
            },
            {
                name: '库存数量',
                type: 'pie',
                radius: ['50%', '70%'],
                labelLine: {
                    normal: {
                        length: 1,
                        length2: 1
                    }
                },
                color: [ValueColor.RED],
                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{c}'
                    }
                },
                data: [
                    {
                        value: 5623,
                        name: '经销商',
                        // normal: {
                        //   color: ValueColor.GREEN
                        // }
                    }
                ]
            }
        ]
    };
    inventoryEcharts.setOption(option);
</script>
</body>
</html>

效果：

柱状图

代码：

let curEchartsOption = {
  color: ['#3398DB'],
  tooltip : {
    trigger: 'axis',
    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
      type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis : [
    {
      type : 'category',
      data : ['Yeti野帝', 'SK', '全新晶锐', '明锐旅行车', '2017款昕锐', '2017款明锐', '明锐经典款', '2017款昕动', 'Yeti'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis : [
    {
      type : 'value'
    }
  ],
  series : [
    {
      name:'直接访问',
      type:'bar',
      barWidth: '60%',
      data:[9, 26, 10, 1, 2, 37, 27, 1, 1]
    }
  ]
};

效果：

添加点击事件

代码：

import ReactEcharts from 'echarts-for-react';
  onByModelClick(e){
    console.log('onByModelClick: e=', e);
  }
  onClickByModelEvents = {
    'click': this.onByModelClick
  }
  render() {
    console.log(`ProcessMonitor render`);
    return (
。。。
                  <div className="chart">
                    <ReactEcharts
                      option={this.state.newAddByModelDict.echartsOption}
                      onEvents={this.onClickByModelEvents}
                    />
                  </div>

显示x轴的标签

代码：

核心代码

axisLabel: {
  interval: 0,
  rotate: 60
},

完整代码

    var curEchartsOption = {
            // title : {
          //       text:'本月新增有望客户分类(按车型分)',
          //       textStyle :{
          //           fontWeight:'normal',
          //           fontSize:'14'
          //       },
      //       // subtext:datName,
      //       subtext: 'DCC',
          //       subtextStyle:{
          //           fontWeight:'normal',
          //           fontSize:'14',
          //           color:'red'
          //       },
          //       top:10,
          //       left: 10
          //   },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    dataView: {show: false, readOnly: true},
                    magicType: {show: false, type: ['bar']},
                    restore: {show: false},
                    saveAsImage: {show: false}
                }
            },
            legend: {
                // left: '75%',
          // top:33,
          top: 0,
          data:['新增有望客户']
            },
            grid:{
                bottom:80
            },
            xAxis: [
                {
                    type: 'category',
                    axisLabel: {
                        interval:0,
                        rotate:60
                    },
                // data:hopeNameArr
                data: ['Yeti野帝', 'SK', '全新晶锐', '明锐旅行车', '2017款昕锐', '2017款明锐', '明锐经典款', '2017款昕动', 'Yeti'],
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    min: 0,
                    //max: 200,
                   // interval: 30,
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name:'新增有望客户',
                    type:'bar',
                    barWidth : 20,//柱图宽度
                    label: {
                        normal: {
                            show: true,
                            color:'red',
                            position: 'top',
                            textStyle: {
                                color: 'black',
                                fontFamily: 'verdana',
                                fontSize: 12,
                                fontStyle: 'normal'
                            }
                        }
                    },
                    itemStyle: {
                  // normal:{color:'#C0DDAD' }
                  // normal:{color:'#3398DB' }
                  normal:{color: ValueColor.DARK_BLUE }
                    },
                // data:hopeNameArrNum
                data: [9, 26, 10, 1, 2, 37, 27, 1, 1]
                }
            ]
        };

效果：

多层饼图

多层饼图==嵌套环形图

代码：

import ReactEcharts from 'echarts-for-react';
//import './app.css';
export default class App extends Component {
  getProspectOption() {
    const option = {
      title: {
        text: '有望监控：本月新增有望客户目标完成进度',
        // text: '有望客户',
        // textAlign: 'left',
        // textAlign: 'center',
        // textAlign: 'right',
        // textBaseline: 'middle',
        // padding: 1,
        // left: 10,
        textStyle: {
          color: 'red'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}<br/>百分比：{d}%'
      },
      // legend: {
      //   orient: 'vertical',
      //   x: 'left',
      //   data:['差值', 'DCC','电话','进店','外拓','二级网点']
      // },
      series: [
        {
          name:'43%',
          type:'pie',
          selectedMode: 'single',
          radius: ['0%', '20%'],
          // labelLine :{show:true},
          label: {
            normal: {
              position: 'center',
              // formatter: '{a}/{b}/{c}/{d}%'
              formatter: '{a}',
              textStyle: {
                color: '#000000',
                fontSize: 24
              }
            },
            emphasis:{
              position: 'center',
              // formatter: '{a}/{b}/{c}/{d}%'
              formatter: '{a}',
              textStyle: {
                color: '#000000',
                fontSize: 24
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#ECF0F5'
            }
          },
          data:[
            {
              value: 83/200,
              name:'新增百分比'
              // selected:true
            }
          ]
        },
        {
          name:'访问来源',
          type:'pie',
          selectedMode: 'single',
          radius: ['20%', '50%'],
          label: {
            normal: {
              position: 'inner',
              // formatter: '{a}/{b}/{c}/{d}%'
              formatter: '{b} {c}'
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data:[
            // {value:113, name:'缺口', selected:true},
            {value:113, name:'缺口'},
            {value:87, name:'新增数'}
          ]
        },
        {
          name:'访问来源',
          type:'pie',
          radius: ['58%', '70%'],
          label: {
            normal: {
              // position: 'inner',
              // formatter: '{a}/{b}/{c}/{d}%'
              formatter: '{b} {c}'
            }
          },
          labelLine : {
            normal : {
              length : 10,
              length2 : 15
            }
          },
          data:[
            {value:113, name:'差值'},
            {value:17, name:'DCC'},
            {value:16, name:'电话'},
            {value:30, name:'进店'},
            {value:23, name:'外拓'},
            {value:1, name:'二级网点'}
          ]
        }
      ]
    };
    return option;
  }
  render() {
    return (
      <div className="wrapper">
        <HeaderBar />
        <NavigationMenu />
        <div className="content-wrapper">
          …
          <section className="content">
            {/* <div className={style.prospect_object}>有望监控：本月新增有望客户目标完成进度</div> */}
            {/* <div className="prospect_object">有望监控：本月新增有望客户目标完成进度</div> */}
            <ReactEcharts
              option={this.getProspectOption()}
              style={{height: '350px', width: '100%'}}
              className='react_for_echarts' />
          </section>

        </div>

效果：

左右叠加图

代码：

let curEchartsOption = {
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: false
      },
      xAxis:  {
        type: 'value',
        data: [49, 4, 12, 26, 25, 0]
      },
      yAxis: {
        show: false,
        type: 'category',
        //data: ['周一','周二','周三','周四','周五','周六','周日']
        // data: ['周一']
        data: ['周一']
      },
      series:
      [
        {
          name: '直接访问',
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'insideRight'
            }
          },
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
          name: '邮件营销',
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'insideRight'
            }
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '联盟广告',
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'insideRight'
            }
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '视频广告',
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'insideRight'
            }
          },
          data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
          name: '搜索引擎',
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'insideRight'
            }
          },
          data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
      ]
    };

效果：

地图

代码：

<!– ECharts –>
<script src="dist/lib/echarts/echarts.js"></script>
<script src="dist/lib/echarts/map/china.js"></script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('china_map'));
function randomData() {
    return Math.round(Math.random()*1000);
}
option = {
    title: {
        text: ",
        subtext: ",
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['2017年']
    },
    visualMap: {
        show: false,
        min: 0,
        max: 500,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],           // 文本，默认为数值文本
        calculable: false,
        inRange: {
          //color: [ '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          color: [ '#FF0033', '#22BF2E']
        }
    },
    // toolbox: {
    //     show: true,
    //     orient: 'vertical',
    //     left: 'right',
    //     top: 'center',
    //     feature: {
    //         dataView: {readOnly: false},
    //         restore: {},
    //         saveAsImage: {}
    //     }
    // },
    series: [
        {
            name: '2016年',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
              //大西北区
              {name: '甘肃',value: 50 },
              {name: '青海',value: 50 },
              {name: '新疆',value: 50 },
              {name: '宁夏',value: 50 },
              {name: '陕西',value: 50 },
              {name: '山西',value: 50 },
              //大中南区
              {name: '湖南',value: 450 },
              {name: '江西',value: 450 },
              {name: '湖北',value: 450 },
              //大华东区
              {name: '江苏',value: 450 },
              {name: '安徽',value: 450 },
              //大华南区
              {name: '广东',value: 50 },
              {name: '海南',value: 50 },
              {name: '福建',value: 50 },
              //大华北区
              {name: '黑龙江',value: 450 },
              {name: '吉林',value: 450 },
              {name: '辽宁',value: 450 },
              {name: '河北',value: 450 },
              {name: '天津',value: 450 },
              {name: '北京',value: 450 },
              {name: '内蒙古',value: 450 },
              //大华中区
              {name: '河南',value: 450 },
              {name: '山东',value: 450 },
              //大东南区
              {name: '浙江',value: 450 },
              {name: '上海',value: 450 },
              //大西南区
              {name: '重庆',value: 450 },
              {name: '四川',value: 450 },
              {name: '西藏',value: 450 },
              {name: '云南',value: 450 },
              {name: '广西',value: 450 },
              {name: '贵州',value: 450 },
              {name: '台湾',value: 450 },
              {name: '香港',value: 450 },
              {name: '澳门',value: 450 }
            ]
        },

    ]
};
myChart.setOption(option);
</script>
</body>
</html>

效果：

漏斗图

代码：

<div class="row">
<div class="col-md-6">
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">转化</h3>
      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
        <i class="fa fa-minus"></i></button>
      </div>
    </div>
    <div class="box-body">
      <div id="echart_convertion" style="width: 550px; height:400px; transform: rotate(270deg);" >
      </div>
    </div>
  </div>
</div>
。。。
</div>
<script src="dist/lib/echarts/echarts.js"></script>
<script type="text/javascript">
var convertionEcharts = echarts.init(document.getElementById('echart_convertion'));
option = {
  title: {
      text: '',
      subtext: ''
  },
  tooltip: {
      trigger: 'item',
      // formatter: “{a} <br/>{b} : {c}%"
      formatter: “{a} <br/>{b} : {c}"
  },
  // toolbox: {
  //     feature: {
  //         dataView: {readOnly: false},
  //         restore: {},
  //         saveAsImage: {}
  //     }
  // },
  legend: {
      data: ['线索','有望','订单','成交']
  },
  series: [
      {
          name: '目标',
          type: 'funnel',
          left: '10%',
          width: '80%',
          label: {
              normal: {
                  formatter: '{b}预期'
              },
              emphasis: {
                  position:'inside',
                  // formatter: '{b}预期: {c}%'
                  formatter: '{b}预期: {c}'
                }
          },
          labelLine: {
              normal: {
                  show: false
              }
          },
          itemStyle: {
              normal: {
                  opacity: 0.7
              }
          },
          data: [
              {value: 80, name: '成交'},
              {value: 200, name: '订单'},
              {value: 600, name: '有望'},
              {value: 2000, name: '线索'}
          ]
      },
      {
          name: '实际',
          type: 'funnel',
          left: '10%',
          width: '80%',
          maxSize: '80%',
          label: {
              normal: {
                  position: 'inside',
                  // formatter: '{c}%',
                  formatter: '{c}',
                  textStyle: {
                      color: '#fff'
                  }
              },
              emphasis: {
                  position:'inside',
                  // formatter: '{b}实际: {c}%'
                  formatter: '{b}实际: {c}'
              }
          },
          itemStyle: {
              normal: {
                  opacity: 0.5,
                  borderColor: '#fff',
                  borderWidth: 2
              }
          },
          data: [
              {value: 60, name: '成交'},
              {value: 160, name: '订单'},
              {value: 500, name: '有望'},
              {value: 1000, name: '线索'}
          ]
      }
  ]
};
convertionEcharts.setOption(option);
</script>

效果：

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-16 08:35:33

心得

心得

ReactJS中初始化ECharts时，option不能为空null

否则会出现：

Error setOption should not be called during main process

详见：

【已解决】ReactJS中ECharts出错：util.js Uncaught in promise Error setOption should not be called during main process

ReactJS中更新ECharts的option时，确保最开始初始化和后序更新时，都是同一种类型

不要出现，开始初始化为二维柱状图，后序更新设置的却是一维柱状图

否则会出现显示的异常，显示出多余的内容

详见：

【已解决】ReactJS中ECharts中水平柱状图中第一列的提示内容显示多余内容

setState去更新值，立刻就去使用被改变的值，有时候会出现没有立刻获取到新值

想要确保获得更新后的值，可以使用setState的callback

详见：

【已解决】ReactJS中setState去更改值但无效该值没有立刻改变

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-15 15:42:37

ECharts心得

ECharts心得

点击时获得额外自定义数据

此处设置series中的data（列表）中的每个对象，系统是直接赋值给内部属性的，比如常见的：

name和value

对应着官网的API中的参数：

https://echarts.apache.org/zh/option.html#series-bar.data.name

但是除此之外的其他自己定义的属性名，比如下面再去试试customerSourceType，ECharts可以自动忽略，重点的是：不会报错。

且还可以：

在点击事件回调函数中，可以返回对应的原先的dict值。

比如再去试试：

    data: [
        {
            name: CUSTOMER_SOURCE.DCC.name,
            value: dccNum,
            customerSourceType: CUSTOMER_SOURCE.DCC.type,
        }
    ]

效果：

竖向图表

const cowActivityStyle = {
  // width: '90vw',
  // height: '150vh',
  // margin: '75vw auto'
  // width: '375px',
  // height: '600px',
  // margin: 'auto',
  // width: '1700px', // HH:mm
  width: '900px', // HH
  // height: '300px',
  // height: '375px'
  height: '100vw'
  // margin: '0'
  // overflow: "scroll"
};

function getOtion(data, cowFarm, cowCode) {
  console.log(`getOtion data=${data}`);
  let yAxisAverageActivityDataList = [];
  let yAxisCurrentActivityDataList = [];
  let xAxisDatetimeDataList = [];

  for (let eachDict of data) {
    yAxisAverageActivityDataList.push(eachDict.Int_AvgSteps);
    yAxisCurrentActivityDataList.push(eachDict.Int_Steps);
    let dtmDatetime = timestampToDate(eachDict.Dtm_Date);
    // console.log(`dtmDatetime=${dtmDatetime}`);
    // let formatedDatetime = datetimeToStr(dtmDatetime, "", "HH:mm");
    let formatedDatetime = datetimeToStr(dtmDatetime, "", "HH");
    // console.log(`formatedDatetime=${formatedDatetime}`);
    xAxisDatetimeDataList.push(formatedDatetime);
  }

  console.log(`yAxisAverageActivityDataList=${yAxisAverageActivityDataList}`);
  console.log(`yAxisCurrentActivityDataList=${yAxisCurrentActivityDataList}`);
  console.log(`xAxisDatetimeDataList=${xAxisDatetimeDataList}`);

  return {
    title: {
      show: true,
      text: `牛场：${cowFarm} 牛号：${cowCode} 活动量`,
      left: "center",
      top: 5,
      textStyle: {
        fontSize: 14,
        align: "center",
        verticalAlign: "bottom"
      }
    },
    tooltip : {
      trigger: 'axis'
    },
    legend: {
      data: ['平均活动量','当前活动量'],
      top: "bottom",
      left: "center"
    },
    grid: {
      show: false,
      left: "4%",
      right: "10%",
      top: "40",
      bottom: "50"
    },
    xAxis : [
      {
        type : 'category',
        data : xAxisDatetimeDataList
      }
    ],
    yAxis : [
      {
        type : 'value',
        name : '平均',
        axisLabel : {
          formatter: '{value}'
        }
      },
      {
        type : 'value',
        name : '当前',
        axisLabel : {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: "平均活动量",
        type: "line",
        label: {
          normal: {
            show: true
          }
        },
        yAxisIndex: 0,
        data: yAxisAverageActivityDataList
      },
      {
        name: "当前活动量",
        type: "line",
        yAxisIndex: 1,
        label: {
          normal: {
            show: true
          }
        },
        data: yAxisCurrentActivityDataList
      }
    ]
  };
}

        <div class={style.activity_chart}>
          {/* <div class={style.activity_title}>
            <p>牛场:&amp;nbsp;xxxx&amp;nbsp;&amp;nbsp;牛号:&amp;nbsp;12345</p>
          </div> */}

          <ReactEcharts
            style={cowActivityStyle}
            option={getOtion(this.state.respCowActivityData, "宁夏平吉堡第二奶牛养殖场", this.state.cow_code)}
          />
        </div>

以及css：

.activity_chart {
  transform: rotate(90deg);
}

效果：

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-15 17:31:04

附录

附录

下面列出相关参考资料。

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2020-03-17 09:11:34

参考资料

参考资料

【已解决】用ECharts画饼图且希望选项和百分比等值都显示在饼图上

【已解决】ECharts 柱状图 带折线

EChart 散列图 树状图

js库 图谱效果 星状图

【未解决】ECharts中的地图的设置了颜色但是显示不准确

【已解决】ReactJS中ECharts出错：util.js Uncaught in promise Error setOption should not be called during main process

【已解决】ReactJS中ECharts中水平柱状图中第一列的提示内容显示多余内容

【已解决】ReactJS中添加AdminLTE中的盒子效果

【已解决】ReactJS中ECharts的事件回调函数中出错：Uncaught TypeError Cannot read property of undefined

【已解决】集成ECharts时报错：echarts.js Map china not exists You can download map file on

【记录】用AdminLTE实现报表的原型

【整理】数据可视化 技术 JS库 Charts

【已解决】js中如何实现从上到下垂直显示的图表 – 在路上

【已解决】ECharts中如何在点击事件函数中获得额外的自定义数据 – 在路上

【已解决】AdminLTE中添加外层圆环内层扇区的饼图 – 在路上

【已解决】ECharts的饼图的位置向左移动 – 在路上

【已解决】AdminLTE中添加水平方向的漏斗图 – 在路上

【已解决】AdminLTE中如何实现ECharts的水平的漏斗图

【已解决】AdminLTE中集成ECharts中的中国地图

【已解决】ReactJS中如何画左右叠加图的ECharts图表

【已解决】ReactJS的ReactJS-AdminLTE中添加ECharts

【已解决】ReactJS中setState去更改值但无效该值没有立刻改变

【已解决】ECharts中如何实现柱状图

【已解决】ReactJS中如何给ECharts中添加柱状图点击事件

【已解决】ECharts中如何让x轴上的标签全部显示

【已解决】ReactJS中ECharts中水平柱状图中第一列的提示内容显示多余内容

ECharts 教程 | 菜鸟教程

crifan.com，使用署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更新： 2021-09-16 08:40:33