Echarts入门三步

Echarts入门三步

今天主要是分享一下,js图表库Echarts.这是百度推出的一款数据可视化工具,包含了饼图 折线图 柱状图等常规图表,还有散点图 树图 关系图 桑基图 旭日图等等;还可以引入百度地图作为坐标系创建线图 热力图等;
个人用过一段时间,感觉还是比较好用的.相比较D3 Highcharts,优点是简单粗暴,好多功能已经封装好了,只要声明配置项就可以;缺点就是交互不灵活;

创建图表三步

创建一张图表,跟把大象放进冰箱的步骤是一样的,分三步;

1.第一步:实例化DOM

在引入echarts后(官网下载/npm/cdn), 创建一个具有width height的DOM,用于存放图表;echarts.init(DOM)初始化;

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

2.创建配置项

其实图表写的最多的就是这个配置项Object;option包含图表类型 样式 展示方式等一系列的配置项;

// 指定图表的配置项和数据
var option = {
    //标题
    title: {
        text: 'ECharts 入门示例'
    },
    //提示框
    tooltip: {},
    //顶部图例,对应一种数据维度
    legend: {
        data: ['销量']
    },
    //坐标轴配置项
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    //创建的图表集合,series可以是包含多种类型的图表(map+scatter等)
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

3.渲染图表

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

搞定,配一张效果图;

补充

看一下,实例化的结构;

实际开发中div#main width height:100%,继承父级,布局控制图表框大小,这样在组件化开发中就避免了重复定义图表的大小问题,只要处理数据及样式就可以了;初始化的div在echarts初始化后创建了两个div:.
1.第一个是存放canvas图表(当然也可以配置用SVG选渲染,避免大屏时针问题)
2.第二个是存放tooltip;

好,今天就写到这里.欢迎您给大家指出不足;