This is prior to contact with the icon library, recently used project again on the chart aspects. Because not previously sorted out, separate, related content, each time you need to re-inspection, it is particularly record, I hope to see the article also give you help. Next expectations, will maintain the good habit of recording, give yourself a vertical flag, (# ^. ^ #). There are shortcomings, but also hope pointing wow!

Introduce eChats

ECharts, abbreviated from Enterprise Charts, commercial-grade data chart, a pure Javascript charting library can run smoothly on the PC and mobile devices, is compatible with the vast majority of current browsers (IE6 / 7/8/9/10/11, chrome, firefox, Safari, etc.), dependent on the underlying lightweight Canvas library ZRender, intuitive, vivid, interactive, highly customization data visualization graphs. Innovative drag heavy computation, data views, roaming range and other features greatly enhance the user experience, giving the user the ability to perform data mining, integration.

For the project

Based react webpack currently use development environment used to use as follows

npm install ECharts (currently item 4.2.1 version)
npm install echarts --save

Introduced ECharts

var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

The introduction of demand

Tip: Demand introducing ECharts charts and components

Default require ( 'echarts') obtained is already loaded ECharts charts and all components of the package, so the volume will be relatively large, if the volume of the project to more stringent requirements, may require only the introduction of modules as needed.

For example, the sample code above uses only a histogram, and title element balloons, so when introduced only need to import the module, can effectively reduce the volume of the packaged from more than 170 KB to 400 KB.

Tip: You can see the list of modules needed to introduce https://github.com/ecomfe/echarts/blob/master/index.js

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});