Echarts.js简介

在平时开发项目时，免不了需要对数据进行图表显示的需求，比如：趋势图、饼状图、柱形图等。

Echartsjs是来自百度团队研发的图表js插件，利用HTML+js实现折线图、饼状图、热点图、3d图形等等，可在PC和移动端显示，加载速度快，功能丰富。

>

提取码：aihy

为Echarts放置一个具备宽高的DOM容器

Echarts加载数据

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue20 和 echarts 封装的 V-Charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

v-charts 已经处理了关于echarts依赖引入的问题，保证所使用的图表，都是最小的文件。

npm安装

引入v-charts

完整引入

按需引入

V-Charts的每种图表组件，都单独打包到lib文件夹下，以下为案例

使用时，可以直接将单个图表引入到项目中,对应上面图表看自己的项目需求

配置项                            简介                       类型                            备注

data                              图表数据                 Object                columns 代表指标和维度名称，

                                                                                               rows 为数据内容

width                             图表宽度                  String                 默认 auto

height                            图表高度                  String                 默认 400px

settings                         图表配置项               Object                -

colors                            颜色列表                    Array                 -

tooltip-visible                是否显示提示框          Boolean            默认为 true

legend-visible               是否显示图例              Boolean            默认为 true

legend-position             图例显示位置              String               可选'left', 'top', 'right', 'bottom'

grid                                网格配置                     Object               -

events                        为图表绑定事件              Object             包含事件名-事件处理函数的对象

before-config         对数据提前进行额外的处理   Function      在数据转化为配置项开始前触发，

                                                                                                 参数为 data，返回值为表格数据

after-config         生成echarts配置进行额外的处理  Function   在数据转化为配置项结束后触

                                                                              发，参数为 options，返回值为 echarts 配置

after-set-option       生成图后获取echarts实例             Function                  参数为echarts实例

after-set-option-once  图后获取echarts只执行一次      Function               参数为echarts实例

mark-line                 图表标线                          Object                                   -                

mark-area                图表标志区域                  Object                                    -

visual-map              视觉映射组件                  Array, Object                            -

mark-point               图表标点                          Object                                     -

data-zoom          区域缩放组件                       Array, Object                           -

toolbox                 工具箱                                Object                                     -

title                        图表标题                            Object                                     -

init-optionsinit       附加参数                              Object                                    -

theme                 自定义主题                            Object                         内容为自定义主题参数

theme-name      自定义主题名称                        String           内容为全局注册的自定义主题名称

loading               加载状态                                   Boolean               默认为false

data-empty         暂无数据状态                            Boolean              默认为false

judge-width      是否处理生成图表时的宽度问题   Boolean             默认为 true

width-change-delay容器宽度变化的延迟              Number              默认为300

备注：使用loading和dataEmpty属性前需引入css import 'v-charts/lib/stylecss'

同时，为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置，extend为对象类型，对象内的属性可以是函数，也可以对象，也可以是其他类型的值当属性为函数时，设置的是函数的返回值当属性为对象时，如果在options中对应的属性为对象(eg: tooltip)或包含对象的数组(eg: series)，对应的配置会被合并，否则将直接覆盖对应的配置具体使用方法可以参考下面的属性配置示例最后，下面这些与echarts配置项对应的属性也被加到了组件上，设置后将会直接覆盖options原有的对应属性。

备注：如果某属性加上去之后没有生效，很可能是没有引入相应的模块

另外一种是图表自身的属性，比如用户设置数据类型的dataType，这样的属性被置于settings内，每种图表的配置项不完全相同，具体参数参考 下述示例~

欢迎各位评论转发or收藏，新手求带~不喜勿喷！大爷，给小妞个赞赏吧~

定义一个数组为names，在 legend中通过 data: names传入图例名称；

创建一个数组mydata[]，用for循环把后台传来的List整个放进去(注意格式为“{value:xxx, name:xxx}”），在option里的series中通过“data: mydata”传入即可；

var selectArr = optionlegenddata;

myCharton('legendselectchanged', function(obj) {

//alert("22");

var selected = objselected;

var name = objname;

});

overlaysetOption(option);

var myChart;

        //创建ECharts图表方法

        function DrawEChart(ec) {

            //--- 折柱 ---

            myChart = ecinit(documentgetElementById('main'));

            //图表显示提示信息

            myChartshowLoading({

                text: "图表数据正在努力加载"

            });

            //定义图表options

            var options = {

                title: {

                    text: "通过Ajax获取数据呈现图标示例",

                    subtext: ": ">        }

参考：>

    //基于准备好的dom，初始化echarts实例

    var myChart = echartsinit(this$refsmain);

    / 深拷贝一下 生成两个不同的对象 /

    thislineList = JSONparse(JSONstringify(thisreportsList));

    / 展示标题 /

    thislineListtitle = {

      text: "华东饼图数据",

    };

    / 展示提示框组件 /

    thislineListtooltip = {

      / a表示系列名 <br/>表示换行 b表示数据名 c表示数据值 d表示所占的百分比 /

      formatter: '{a} <br> {b} <br> {c} <br> ({d}%)'

    };

    / 把图例的位置调整一下 /

    thislineListlegendtop = '10%';

    thislineListlegendleft = '0';

    / 只显示华东的饼图数据 /

    thislineListseriessplice(1)

    / 先把图标的类型都改成饼图 /

    thislineListseries[0]type = 'pie';

    / 把图例中除了华东的图例都删掉 /

    thislineListlegenddatasplice(1);

    / 拿到时间集合用来展示饼图的name值 /

    let nameList = thislineListxAxis[0]data;

    / 拿到数据用来展示饼图的value值 /

    let valueList = thislineListseries[0]data;

    /  let data = [{

      name:"2017-12-27",

      value:2999

    }] /

    let newArr = [];

    / 下面的 *** 作是为了把两个数组整合成上面的格式 /

    nameListforEach((r, i) => {

      let obj = {

        name: r,

        / 因为两个数组的长度是一样的，

        索引对应的值也是一样的，key和value的值是相对应，

        所以直接使用如下方式取值 /

        value: valueList[i]

      }

      / 把组装好的对象塞到新数组中 /

      newArrpush(obj)

    })

 / 给华东的数据组转好格式后重新赋值，为了展示饼图线对应的名字 /

    thislineListseries[0]data = newArr;

    / 设置饼图的圆心的大小和圆的大小 /

    thislineListseries[0]radius = ['10%', '45%'];

    / 设置圆的上下左右的距离 /

    thislineListseries[0]center = ['58%', '60%'];

    / 把圆的形状设置成玫瑰形 /

    thislineListseries[0]roseType = 'area';

    / 给圆设置圆角 /

    thislineListseries[0]itemStyle = {

      borderRadius: 5

    }

    / 把x轴隐藏 /

    thislineListxAxis = {

      show: false

    }

    / 把y轴隐藏 /

    thislineListyAxis = {

      show: false

    }

    // 绘制图表

    myChartsetOption(thislineList);

    windowPieChart = myChart;

  },

通过 npm 获取 echarts，npm install echarts --save

为了省事，全局引用echarts

打开mainjs 文件

echarts 新版本跟之前import 方式不一样了，需要as 一下。

放到全局就不用来回引用了，使用时候直接this$echarts就可以。

从echart 官网上面扒拉下来第一个例子，修改一下

最后初始化这个myChart的时候，一定不要放到create 事件里面，因为界面没有初始化完成，啥都加载不出来

以上就是关于Echarts.js简介全部的内容，包括:Echarts.js简介、v-charts使用心得、Echarts通过Ajax动态获取后端数据（饼状图，柱状图）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！