vue-echarts--混色柱状图

本文简单介绍如何使用vue-echarts画出多种颜色的柱状图：

• 搭建vue-cli 脚手架
• 安装vue-echarts依赖
• 引入vue-echarts
• 绘制图表

搭建vue-cli 脚手架

1.安装 vue（推荐使用淘宝镜像cnpm替换npm进行安装）

cnpm install vue

2.全局安装 vue-cli 脚手架构建工具

cnpm install --global vue-cli

3.创建项目

vue init  

template-name为模板名称，模板有webpack，webpack-simple ，browserify ，browserify-simple ，simple；project-name为项目名称。例如创建一个基于webpack模板，项目名称为my-project：

vue init webpack my-project

4.按照提示进入项目、安装依赖和运行

cd my-project
cnpm install
npm run dev

安装vue-echarts依赖

cnpm install vue-echarts --save

引入vue-echarts

全局引入会将所有的echarts图表打包，导致体积过大，这里推荐按需引入。

import ECharts from 'vue-echarts/components/ECharts';
require('echarts/lib/chart/bar');

绘制图表

制作混色柱状图主要在于对series系列列表数据的处理，其它样式调整可详见echarts官网的配置项手册。 —— [ echarts配置项手册 ]