ECharts 快速入门教程

ECharts 快速入门教程

• 基于准备好的 dom，初始化 echarts 实例：

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

• 指定图表的配置项和数据：

var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫", "雪纺衫", ,"高跟鞋"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 36, 20]
    }]
};

• 使用刚指定的配置项和数据显示图表：

myChart.setOption(option);

• ECharts 中有一些通用的样式，如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在 series 的 itemStyle 里设置：

itemStyle: {
    normal: {
        shadowBlur: 200,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

• itemStyle 有 normal 和 emphasis 两个选项，normal 选项是正常状态的样式，emphasis 是鼠标 hover 时候的高亮样式：

itemStyle: {
    emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

• 要把整个主题改成深色主题，需要改 背景色 和 文本样式。

背景色是 全局 样式，所以，需要直接在 option 下设置 backgroundColor：

setOption({
    backgroundColor: '#2c343c'
})

文本样式可以设置全局的 textStyle：

setOption({
    textStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    }
})

也可以在每个series分别设置，每个series的文本设置在 label.normal.textStyle：

label: {
    normal: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}

• 设置标签的视觉引导线 labelLine 的颜色（label 和 labelLine 也有 normal 和emphasis 两个状态）：

labelLine: {
    normal: {
        lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}

• ECharts 中每项数据样式可以分别设置data下的数据项实现：

data: [{
    value: 400,
    name: '搜索引擎',
    itemStyle: {
        normal: {
            color: '#c23531'
        }
    }
}, ...]

• ECharts 中实现异步数据的更新非常简单，在图表初始化后通过 jQuery 等工具异步获取数据后，在 setOption 填入数据和配置项即可。
  或者先设置完其它的不涉及数据的样式，显示一个空的直角坐标轴，然后获取数据后填入数据：

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

// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '热销品类销量统计'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});

// 异步加载数据
$.get('data.json').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的 series 
            name: '销量',
            data: data.data
        }]
    });
});

• ECharts 默认提供了加载动画，只需要调用showLoading方法显示。数据加载完成后再调用hideLoading方法隐藏加载动画：

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(option);
});

• ECharts 提供了 Media Query『随着容器尺寸改变而自适应』，设置如下：

option = {
    baseOption: { // 初始显示
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },

    media: [ // 媒体查询
        {
            query: { // 这里写规则
                minWidth: 200,
                maxHeight: 300
            },
            option: { // 这里写此规则满足下的 option
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则
            option: {       // 第二个规则对应的 option
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』
            option: {       // 即所有规则都不满足时，采纳这个 option
                legend: {...},
                ...
            }
        }
    ]
};