Echarts.js简介

JavaScript025

Echarts.js简介,第1张

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

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

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

官网首页有着很多实例以及相关介绍，获取echart.js可以从本人百度网盘获取，包含所有图表组件，可直接引用。

链接： https://pan.baidu.com/s/1IEm8NGwqq4ExgYWp8mz9CA

提取码：aihy

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

Echarts加载数据

是一个 百度旗下 使用各种图表展示统计分析结果的js插件

引入这个js，你就可以使用echarts官网上提供的所有图表工具

官网链接：网页链接

如图所示：

D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。

D3的特点

允许绑定任意数据到DOM，将数据驱动转换应用到Document中。

不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。

支持SVG，在Web页面上渲染毫无压力。

回到顶部

D3的使用方法

关于D3的具体用法，可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。

index.html代码：

<!DOCTYPE html>

<meta charset="utf-8">

<style>

 

svg {

  font: 10px sans-serif

}

 

.y.axis path {

  display: none

}

 

.y.axis line {

  stroke: #fff

  stroke-opacity: .2

  shape-rendering: crispEdges

}

 

.y.axis .zero line {

  stroke: #000

  stroke-opacity: 1

}

 

.title {

  font: 300 78px Helvetica Neue

  fill: #666

}

 

.birthyear,

.age {

  text-anchor: middle

}

 

.birthyear {

  fill: #fff

}

 

rect {

  fill-opacity: .6

  fill: #e377c2

}

 

rect:first-child {

  fill: #1f77b4

}

 

</style>

<body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

 

var margin = {top: 20, right: 40, bottom: 30, left: 20},

    width = 960 - margin.left - margin.right,

    height = 500 - margin.top - margin.bottom,

    barWidth = Math.floor(width / 19) - 1

 

var x = d3.scale.linear()

    .range([barWidth / 2, width - barWidth / 2])

 

var y = d3.scale.linear()

    .range([height, 0])

 

var yAxis = d3.svg.axis()

    .scale(y)

    .orient("right")

    .tickSize(-width)

    .tickFormat(function(d) { return Math.round(d / 1e6) + "M" })

 

// An SVG element with a bottom-right origin.

var svg = d3.select("body").append("svg")

    .attr("width", width + margin.left + margin.right)

    .attr("height", height + margin.top + margin.bottom)

  .append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

 

// A sliding container to hold the bars by birthyear.

var birthyears = svg.append("g")

    .attr("class", "birthyears")

 

// A label for the current year.

var title = svg.append("text")

    .attr("class", "title")

    .attr("dy", ".71em")

    .text(2000)

 

d3.csv("population.csv", function(error, data) {

 

  // Convert strings to numbers.

  data.forEach(function(d) {

    d.people = +d.people

    d.year = +d.year

    d.age = +d.age

  })

 

  // Compute the extent of the data set in age and years.

  var age1 = d3.max(data, function(d) { return d.age }),

      year0 = d3.min(data, function(d) { return d.year }),

      year1 = d3.max(data, function(d) { return d.year }),

      year = year1

 

  // Update the scale domains.

  x.domain([year1 - age1, year1])

  y.domain([0, d3.max(data, function(d) { return d.people })])

 

  // Produce a map from year and birthyear to [male, female].

  data = d3.nest()

      .key(function(d) { return d.year })

      .key(function(d) { return d.year - d.age })

      .rollup(function(v) { return v.map(function(d) { return d.people }) })

      .map(data)

 

  // Add an axis to show the population values.

  svg.append("g")

      .attr("class", "y axis")

      .attr("transform", "translate(" + width + ",0)")

      .call(yAxis)

    .selectAll("g")

    .filter(function(value) { return !value })

      .classed("zero", true)

 

  // Add labeled rects for each birthyear (so that no enter or exit is required).

  var birthyear = birthyears.selectAll(".birthyear")

      .data(d3.range(year0 - age1, year1 + 1, 5))

    .enter().append("g")

      .attr("class", "birthyear")

      .attr("transform", function(birthyear) { return "translate(" + x(birthyear) + ",0)" })

 

  birthyear.selectAll("rect")

      .data(function(birthyear) { return data[year][birthyear] || [0, 0] })

    .enter().append("rect")

      .attr("x", -barWidth / 2)

      .attr("width", barWidth)

      .attr("y", y)

      .attr("height", function(value) { return height - y(value) })

 

  // Add labels to show birthyear.

  birthyear.append("text")

      .attr("y", height - 4)

      .text(function(birthyear) { return birthyear })

 

  // Add labels to show age (separate not animated).

  svg.selectAll(".age")

      .data(d3.range(0, age1 + 1, 5))

    .enter().append("text")

      .attr("class", "age")

      .attr("x", function(age) { return x(year - age) })

      .attr("y", height + 4)

      .attr("dy", ".71em")

      .text(function(age) { return age })

 

  // Allow the arrow keys to change the displayed year.

  window.focus()

  d3.select(window).on("keydown", function() {

    switch (d3.event.keyCode) {

      case 37: year = Math.max(year0, year - 10) break

      case 39: year = Math.min(year1, year + 10) break

    }

    update()

  })

 

  function update() {

    if (!(year in data)) return

    title.text(year)

 

    birthyears.transition()

        .duration(750)

        .attr("transform", "translate(" + (x(year1) - x(year)) + ",0)")

 

    birthyear.selectAll("rect")

        .data(function(birthyear) { return data[year][birthyear] || [0, 0] })

      .transition()

        .duration(750)

        .attr("y", y)

        .attr("height", function(value) { return height - y(value) })

  }

})