ECharts简介

什么是ECharts

ECharts是百度开源的纯 Javascript 图表库,目前开源可以与highcharts相匹敌的一个图表库.支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。

简单配置

1.Head内通过script引入ECharts3的js:
2.为 ECharts 准备一个具备大小(宽高)的 DOM :


3.初始化echarts实例var myChart = echarts.init(document.getElementById('main'));
4.设置Option中参数,指定图表的配置项和数据
5.使用setoption生成图表显示图表:myChart.setOption(option);

图表名词

  • line:折线图,堆积折线图,区域图,堆积区域图。
  • bar:柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图。
  • scatter:散点图,气泡图。散点图至少需要横纵两个数据,更高维度数据加入时可以映射为颜色或大小,当映射到大小时则为气泡图
  • k:K线图,蜡烛图。常用于展现股票交易数据。
  • pie:饼图,圆环图。饼图支持两种(半径、面积)南丁格尔玫瑰图模式
  • radar:雷达图,填充雷达图。高维度数据展现的常用图表。
  • chord:和弦图。常用于展现关系数据,外层为圆环图,可体现数据占比关系,内层为各个扇形间相互连接的弦,可体现关系数据
  • force :力导布局图。常用于展现复杂关系网络聚类布局。
  • map:地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用,如室内地图、运动场、物件构造等。
  • gauge:仪表盘。用于展现关键指标数据,常见于BI类系统。
  • funnel:漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化,常见于BI类系统。
  • evnetRiver:事件河流图。常用于展示具有时间属性的多个事件,以及事件随时间的演化。
  • treemap:矩形式树状结构图,简称:矩形树图。用于展示树形数据结构,优势是能最大限度展示节点的尺寸特征。
  • venn:韦恩图。用于展示集合以及它们的交集。

问题补充

折线图的折线平滑显示

series: [
    smooth: true,
]

设置图例的形状

修改图例的icon,自带的有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

legend : { //=========圖表控件
                    show : true,
                    data : [ {
                        name : '负载',
                        
                        icon : 'rect'
            
                    },
                   {
                        name : '用户名',
                        icon : 'roundRect'
                    } ]
                }

参考

Echarts force图形小节
ECharts 实现人民的名义关系图谱
Echarts3 关系图-力导向布局图
可伸缩力导向图
Echarts3 试用总结
Echarts3教程
echarts3生成关系网络关系力向图

你可能感兴趣的:(ECharts简介)