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(数组)
                }
            ]
        })

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏

平井缘

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者