Echart - 最好最强大效果最丰富的可视化图表插件

# 官网
http://echarts.baidu.com/

# demo
http://echarts.baidu.com/gallery/index.html

 

Echart

npm install echarts --save  

 

demo1 :  从简单的柱状图开始

核心知识点【setOption参数介绍】：http://echarts.baidu.com/option.html#title

var echarts = require('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]
    }]
});

 

 

demo2 ： 异步数据加载和更新

ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得十分简单。

var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});
setTimeout(function () {
    myChart.hideLoading();
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
},2000);

 

转载于:https://www.cnblogs.com/CyLee/p/6420326.html