这几天刚好用到了echarts，不过项目使用的前端框架非常老了，由此可见echarts兼容性还是hin好的，以后的项目中可能也会遇到很多，准备由浅至深的学习一下echarts，今天先从最基础的开始记录吧~

 

 什么是echarts？

Echarts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

 

echarts的初次使用

初次使用echarts，要引入echarts.js文件

 

初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

 

echarts的示例

指定图表的配置项和数据，即设置option 

var option = {        title: {  //            text: '某站点用户访问来源'        },        tooltip: {},        legend: {            //orient: 'vertical',            //left: 'left',            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']        },        xAxis: {                data: [ { value: '直接访问' },                    { value: '邮件营销' },                    { value: '联盟广告' },                    { value: '视频广告' },                    { value: '搜索引擎' }                ]},        yAxis: {},        series: [            {                name: '访问来源',                type: 'bar',                data:[5,20,36,30,10]            }        ]    };

 

 

 

echarts参数