echarts基本使用

数据可视化创建 echarts

官网

基本使用

1.引入echarts.min.js文件

<script src="assets/echarts/echarts.min.js"></script>

2.找到画图的容器(画板)

<div id="box" style="width: 460px; height: 400px;">	</div>

var box = document.querySelector('#box');

3.初始化插件

var myChart = echarts.init(box);

4.配置参数

配置手册

var option = {
    title:{
		text:'2019年注册人数'  //标题
	},
	legend:{
		data:['注册人数']   //说明
	},
    color: ['#3398DB'],  //柱状条颜色
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {    //图形在画板中的位置（相当于给画板设置padding）
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true   //为true按照配置项  为false 无“padding” 按照默认
    },
    xAxis : [   
        {   
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  //键
            axisTick: {
                alignWithLabel: false   //为false 时 y轴指针以间隔居中
            }
        }
    ],
    yAxis : [    
        {
            type : 'value'
        }
    ],
    series : [    
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',  //柱状条宽度
            data:[10, 52, 200, 334, 390, 330, 220]     //值
        }
    ]
};

5.设置参数

myChart.setOption(option);

6.处理数据

  /*获取数据*/
    var data = [
        {
            name:'一月',
            value:300
        },
        {
            name:'二月',
            value:400
        },
        {
            name:'三月',
            value:500
        },
        {
            name:'四月',
            value:200
        },
        {
            name:'五月',
            value:600
        }
    ];
    var xdata = [], sdata = [];
    data.forEach(function (item,i) {
        xdata.push(item.name);
        sdata.push(item.value);
    });

• 在配置参数后设置参数前更改X Y轴参数

 options.xAxis[0].data = xdata;
 options.series[0].data = sdata;

• 最终效果