Echars使用指南

概念介绍

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图柱状图散点图饼图K线图,用于统计的盒形图,用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭。

快速入门

①基于HTML创建脚本

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echars/jquery.js"></script>
    <script src="echars/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;background-color: blanchedalmond"></div>
</body>
</html>

②渲染组件

<script>
  $(function(){
  var myChart = echarts.init($("#char_bar")[0]);
  // 指定图表的配置项和数据
  var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['品类销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        type: 'bar',
        name: '品类销量',
        data: [5, 20, 36, 10, 10, 20]
      }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
})
</script>

③渲染结果
在这里插入图片描述

基础概念

echarts 实例

一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等(用 option 来描述)。准备一个 DOM 节点(作为 echarts 的渲染容器),就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。

系列(series)

系列series)是很常见的名词。在 echarts 里,系列series)是指:一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”,而在 echarts 中取其扩展的概念,不仅表示数据,也表示数据映射成为的图。所以,一个 系列 包含的要素至少有:一组数值、图表类型(series.type)、以及其他的关于这些数据如何映射成图的参数。

echarts 里系列类型(series.type)就是图表类型。系列类型(series.type)至少有:line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)等。如下图,右侧的 option 中声明了三个 系列series):pie(饼图系列)、line(折线图系列)、bar(柱状图系列),每个系列中有他所需要的series.data
在这里插入图片描述

<script>
        $(function(){
            var myChart = echarts.init($("#char_bar2")[0]);
            // 指定图表的配置项和数据
            var option= {
                title: {
                    text: 'ECharts图例基本使用和'
                },
                tooltip: {},
                legend: {
                    data:['品类销量','利润点',"市场占比"]
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    name: '品类销量',
                    data: [5, 20, 36, 10, 10, 20]
                },{
                    type: 'line',
                    name: '利润点',
                    data: [3, 15, 15, 5, 8, 12]
                },{
                    type: 'pie',
                    name: '市场占比',
                    center:["80%",80],
                    radius:50,
                    data: [
                           {name:"华南",value:150},
                           {name:"华北",value:100},
                           {name:"华中",value:60},
                           {name:"其他",value:50}
                           ]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
</script>

类同地,下图中是另一种配置方式,系列的数据从 dataset 中取:

var option= {
  title: {
    text: 'ECharts图例基本使用'
  },
  dataset:{
    source:[
      ["衬衫",5,3,"华南",150],
      ["羊毛衫",20,15,"华北",100],
      ["雪纺衫",36,15,"华中",60],
      ["裤子",10,5,"其他",50],
      ["高跟鞋",10,8],
      ["袜子",20,12]
    ]
  },
  tooltip: {},
  legend: {
    data:['品类销量','利润点',"市场占比"]
  },
  xAxis: {
    type:"category"
  },
  yAxis: {},
  series: [{
    type: 'bar',
    name: '品类销量',
    encode:{x:0,y:1}
  },{
    type: 'line',
    name: '利润点',
    encode:{x:0,y:2}

  },{
    type: 'pie',
    name: '市场占比',
    center:["80%",80],
    radius:50,
    encode:{itemName:3,value:4}
  }]
};

组件(component)

在系列之上,echarts 中各种内容,被抽象为“组件”。例如,echarts 中至少有这些组件:xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)、grid(直角坐标系底板)、angleAxis(极坐标系角度轴)、radiusAxis(极坐标系半径轴)、polar(极坐标系底板)、geo(地理坐标系)、dataZoom(数据区缩放组件)、visualMap(视觉映射组件)、tooltip(提示框组件)、toolbox(工具栏组件)、series(系列)等。我们注意到,其实系列(series)也是一种组件,可以理解为:系列是专门绘制“图”的组件。如下图,右侧的 option 中声明了各个组件(包括系列),各个组件就出现在图中。

组件描述

坐标系

很多系列,例如 line(折线图)、bar(柱状图)、scatter(散点图)、heatmap(热力图)等等,需要运行在 “坐标系” 上。坐标系用于布局这些图,以及显示数据的刻度等等。

一个坐标系,可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中,包括有 xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)、grid(直角坐标系底板)三种组件。

xAxisyAxisgrid 自动引用并组织起来,共同工作。我们来看下图,这是最简单的使用直角坐标系的方式:只声明了 xAxisyAxis 和一个 scatter(散点图系列),echarts 暗自为他们创建了 grid 并关联起他们:

散点图系列

散点图

var option={
  title: {
    text: '散点分布案例'
  },
  legend:{data:["点分布"]},
  tooltip:{},
  xAxis:{},
  yAxis:{},
  series:[
    {
      type:"scatter",
      name:"点分布",
      data:[
        [13,44],
        [51,51],
        [51,32],
        [67,19],
        [19,33]
      ]
    }
  ]
}

折线图

在这里插入图片描述

var option={
  title: {
    text: '折线分布图'
  },
  legend:{data:["折线图"]},
  tooltip:{},
  xAxis:{
    type: "category",
    data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
  },
  yAxis:{
    min:0,
    max:100,
    interval:10
  },
  series:[
    {
      type:"line",
      name:"折线图",
      data:[10,20,40,35,40,20,10]
    }
  ]
}

柱状图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9q6Wabx-1585185588044)(assets/image-20200319165901828.png)]

var option={
  title: {
    text: '柱状分布图'
  },
  legend:{data:["柱状图"]},
  tooltip:{},
  xAxis:{
    type: "category",
    data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
  },
  yAxis:{
    min:0,
    max:100,
    interval:10
  },
  series:[
    {
      type:"bar",
      name:"柱状图",
      data:[10,20,40,35,40,20,10]
    }
  ]
}

不同Y轴

在这里插入图片描述

var option={
  title: {
    text: '不同Y轴'
  },
  legend:{data:["访问量1","访问量2"]},
  tooltip:{},
  xAxis:{
    data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
  },
  yAxis:[
    {min:0,max:50,interval:5},
    {min:0,max:100,interval:5}
  ],
  series:[
    {
      type:"bar",
      name:"访问量1",
      data:[10,20,40,35,40,20,10],
      yAxisIndex:0
    },{
      type:"line",
      name:"访问量2",
      data:[55,15,40,35,40,25,100],
      yAxisIndex:1
    }
  ]
}

不同x/y轴

在这里插入图片描述

var option={
  title: {
    text: '不同X和Y使用grid分离',
    left:"45%",
    top:0
  },
  grid:[
    {top:50,height:"80%",width:"40%"},
    {top:50,height:"80%",width:"40%",right:"5%"}
  ],
  legend:{
    data:["访问量1","访问量2"],
    left:"80%",
    top:0
  },
  tooltip:{},
  xAxis:[
    { data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],gridIndex:0,type:"category"},
    { data:["mon","tus","wes","thu","fri","sat","sun"],gridIndex:1,type:"category"}
  ],
  yAxis:[
    {min:0,max:50,interval:5,gridIndex:0},
    {min:0,max:100,interval:10,gridIndex:1}
  ],
  series:[
    {
      type:"bar",
      name:"访问量1",
      data:[10,20,40,35,40,20,10],
      yAxisIndex:0,
      xAxisIndex:0
    },{
      type:"line",
      name:"访问量2",
      data:[55,15,40,35,40,25,100],
      yAxisIndex:1,
      xAxisIndex:1
    }
  ]
}

饼状图

在这里插入图片描述

var option = {
  legend:{
    data:["访问来源","周访问量"]
  },
  tooltip:{},
  xAxis:{
    type: "category",
    data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
  },
  yAxis:{
    min:0,
    max:100,
    interval:10
  },
  grid:{
    left:"5%",
    width:"60%"
  },
  series : [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center:["80%","50%"],
      radius:55,
      data:[
        {value:0, name:'视频广告'},
        {value:274, name:'联盟广告'},
        {value:310, name:'邮件营销'},
        {value:100, name:'直接访问'},
        {value:90, name:'搜索引擎'},
        {value:95, name:'广告推广'}

      ]
    },{
      type:"bar",
      name:"周访问量",
      data:[10,20,40,35,40,20,10]
    }

  ]
};
发布了93 篇原创文章 · 获赞 76 · 访问量 2万+
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览