Echarts数据可视化：基础篇（1）—— 集成Echarts

项目地址

介绍

大数据可视化做为前端开发的一个子方向，工做内容大可能是将结构化的数据转换为图表。例如柱状图、条形图、饼图、地图等组件。组成咱们常见的炫酷的大屏。这些图表的渲染通常是基于canvas或者svg，秉承不重复造轮子的原则，（固然也造不出来）使用开源可视化库就是比较必须的了。Echarts做为国内的优秀可视化库，兼容大部分场景，很容易进行定制化开发，因此选择使用Echarts，如下为网易有数-大屏示例

开发环境

• vue
• webpack
• npm

引入

• 1. 安装echarts依赖：npm install echarts --save
• 2. 设置dom，初始化实例

let chart = echarts.init(this.$refs.chart);
复制代码

• 3. 绘制图表

let option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
}
chart.setOption(option);
复制代码