vue项目使用 Echarts 实现双柱柱状图

安装echarts：

npm install echarts -S  或者 cnpm install echarts -S（淘宝镜像）

main.js引入

全局引入：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

按需引入：

示例引入的是柱状

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
export default  echarts

页面显示效果：

代码如下：

Html页面：

<div id="approve" ref="approve" style="width:50%; height: 300px;"></div>

如果需要显示竖向，就把 xAxis和yAxis的内容互换就可以啦。

mounted () {
    this.drawBar()
},
methods: {
    drawBar() {
        const userChar = echarts.init(this.$refs.user)
        userChar.setOption({
            // 设置颜色
            color: ['#108EE9', '#86CF68'],
            //标注位置
            tooltip: {
                trigger: 'axis'
            },
            //提示线
            grid: {
                left: 100
            },
            yAxis: {
                //y轴的设置
                type: 'category',   //不连续的字符串
                data: this.channel
            },
            xAxis: {
                //x轴的设置
                splitLine: { show: false }  //去除网格线
            },
            series: [
            //每个形状的设置
                {
                    name: this.$t('NEW'),
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: {
                                // 显示柱子上的数据
                                show: true,
                                // 让数据为0时不显示
                                formatter:  function (val) {
                                    if (val.value !== 0) {
                                        return val.value
                                    }  else {
                                        return ''
                                    }
                                }
                            }
                        }
                    },
                    // 传给图表的数据
                    data: this.new（数组）
                },
                {
                    name: this.$t('OLD'),
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                // 让数据为0时不显示
                                formatter: function (val) {
                                    if (val.value !== 0) {
                                        return val.value
                                    } else {
                                        return ''
                                    }
                                }
                            }
                        }
                    },
                    // 传给图表的数据
                    data: this.old（数组）
                }
            ]
        })