echarts使用总结

spademan 发布于2019-08-23 11:54 / 503人阅读

摘要：最近一段时间做了一个使用的图表项目。由于理解能力有限，使用起来并非畅通无阻。所谓好记性不如烂笔头，现将一些比较关键的点记录一下，供后续查看。

最近一段时间做了一个使用echarts的图表项目。由于理解API能力有限，使用起来并非畅通无阻。
所谓好记性不如烂笔头，现将一些比较关键的点记录一下，供后续查看。

一使用方法

项目：ionic+angular4+echarts

1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入

2.在组件的.html文件中

3.在组件的.ts文件中配置好pieOption的值以及点击drill down的逻辑jump2Detail

4.ngx-echarts插件 --可以获取echarts实例的service

安装：npm install ngx-echarts
配置：AngularEchartsModule or NgxEchartsModule("ngx-echarts": "^2.1.0")      -- 根据版本不同导入模块 从ngx-echarts.module.d.ts这个文件中看export哪个模块

//app.module.ts
import { NgxEchartsModule } from "ngx-echarts";
@NgModule({
  imports:[NgxEchartsModule], //
  ...
})
  
//xxx.ts
import { NgxEchartsService } from "ngx-echarts";
  
export class xxx {
  constructor(
      private echartService:NgxEchartsService
  ){...}
    
  fn(){
      let echartInstance = this.echartsService.getInstanceByDom(xxx); //获取echarts实例，然后可以调用内部的方法update一些东西
        ...
  }
}

5.图表宽度自适应 -- resize功能

使用方式：
    i.指令配置 -- 忘了
    ii.手动代码
    @HostListener("window:resize", ["$event"])
    resize(event) {
        setTimeout(() => {
          //存在多个图表时，所有均需要自适应的情况
          let echartDoms = Array.from(document.getElementsByClassName("xxx"));
          echartDoms.forEach(dom => {
            this.echartService.getInstanceByDom(dom).resize();
          })
        }, 100);
    }

6.图表的事件 -- 普通鼠标事件与图表自定义的事件均可以通过实例绑定

  //"click"、"dblclick"、"mousedown"、"mousemove"、"mouseup"、"mouseover"、"mouseout"
  echartInstance.on("click",params => {
    ...
  });
  
  //datazoom、legendscroll、datarangeselected、...
  echartInstance.on("dataZoom",params => {
    ...
  })
  
  //有些事件在angular中有对应的指令形式
  //chartClick、chartDbClick、chartMouseDown、chartMouseUp、chartMouseOver、chartMouseOut、chartGlobalOut、chartContextMenu、chartDataZoom

二注意点

1.每一块渲染区域都有一个position的设置，可以自定义离上、下、左、右的距离

grid:{
    top:...
    left:...
    bottom:...
    right:...
}

legend:{
    top:...
    left:...
    ...
}

2.每一个涉及值的显示点基本都提供了formatter

tooltip:{
        formatter: params => { //自定义hover状态数据显示的情况
            let str = "";
            str += `${params[0].name}`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}
`;
                //item中提供了图标、颜色等
            });
            return str;
        }
    }
    
    legend:{
        formatter: (name) => { //需要根据值去重算数据然后显示的情况
            let source = data.source[name.toUpperCase()];
            var total = 0;
            source.forEach(element => {
                total += element;
            });

            return name + ": " + Math.round(total).toLocaleString();
        }
    }

3.xAxis/yAxis 配置坐标轴的一些属性刻度、坐标轴名称、如何显示坐标信息等

4.toolbox 工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置5个工具
其中导出图片可以自己通过canvas的相关API 将多个图表一并导出

5.dataZoom 数据区域缩放组件 -- 可以一个也可以多个

dataZoom:[
    {
        type:"inside", //内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚
        ...
    },
    {
        type:"slider", //在外部 显示为滑动条形的一个组件，可直接拖动使用
        ...
    }
]

6.series 系列列表，每个系列通过type决定图表类型 --根据不同的图表注入不同格式的数据

series:{
    type:"line"/"pie"/"bar"/"treemap",
    ...
}

其实细分到每一个图表都有一些细微的设置，数据以及颜色、间距等，待续...

如果bug请指正Thanks♪(･ω･)ﾉ！

GPU云服务器云服务器使用方法总结 echart Echarts echarts 图表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97641.html

Echarts4.0 使用系列——折线图，这里可能有你需要的

摘要：常用的类型为，需要定义对呀的类目数据，这个例子中的类目数据为日期组成的数据。在使用之前觉得这个插件内容很多，但是去看了一遍折线图的后发现有很多都是类似的，例如轴与轴的设置。前言：项目中经常会使用到Echarts,有的需求差不多复用性高，由于之前没有好好总结，时间一长就容易忘，所以这里总结一下Echarts折线图使用，下面会列举官网一些Api。一、效果图 showImg(https:...

mmy123456 2019-08-30 14:10 评论0 收藏0
Echarts4.0 使用系列——折线图，这里可能有你需要的

摘要：常用的类型为，需要定义对呀的类目数据，这个例子中的类目数据为日期组成的数据。在使用之前觉得这个插件内容很多，但是去看了一遍折线图的后发现有很多都是类似的，例如轴与轴的设置。前言：项目中经常会使用到Echarts,有的需求差不多复用性高，由于之前没有好好总结，时间一长就容易忘，所以这里总结一下Echarts折线图使用，下面会列举官网一些Api。一、效果图 showImg(https:...

hedge_hog 2019-08-22 15:29 评论0 收藏0
vue中引入echarts渲染问题

摘要：在修改数据之后立即使用这个方法，获得更新后的如果不使用在切换的时候从无到有，该节点还没加载，不能获取，会报错 1.通过以下命令安装echarts npm install echarts --save 2.在main.js文件里全局引入echarts import echarts from echartsVue.prototype.$echarts = echarts 3.单页面引用ec...

leiyi 2019-08-02 15:19 评论0 收藏0
echarts 与 highcharts

摘要：渲染能力采用渲染除了对使用，一般来说，更适合绘制图形元素数量非常大这一般是由数据量大导致的图表如热力图地理坐标系或平行坐标系上的大规模线图或散点图等，也利于实现某些视觉特效如交通图。一．简介 echartsecharts是百度公司前端开发的一个图表库，2013年发布第一版，主要采用canvas画图，目前版本3.8.4；完全免费； highcharthighcharts是国外的一家公司...

王笑朝 2019-08-22 17:35 评论0 收藏0