echarts

浏览器画图原理

1. canvas

• 基于像素
• 单个html,类似于画笔在画布上画画
• echarts基于canvas画图

2. svg

• 基于对象模型
• 多个图形元素
• 高保证

echarts实例结构

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
    //标题
    title: {
            text: '可视化图表'
        },
    //图例 data中的名字需对应到series中的name
    legend: {
            data:['邮件营销','联盟广告']
        },
    //x轴
   xAxis: {
            type: 'value|category|time|log',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
    //数据
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        name:'邮件营销',
    }]
};
// setOption 用指定数据绘图
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}