一、象形柱图

1、vue中使用象形柱图

效果图：

2、代码实现

<template>
    <div :class="className" :style="{height:height,width:width}"/>
  </template>
<script>

import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
props: {
className: {
type: String,
    default: 'chart'
},
width: {
type: String,
default: '30%'
},
height: {
type: String,
default: '300px'
},
border: {
type: String,
default: '1px solid red'
},
optionTest:{}
},

data() {
    return {
        myChart: null,
        option: undefined
    }
},
mounted() {
    this.init()
},
methods: {
    //初始化构建
    init() {
            //设备高度;
        var towerHight = 3;
        var timerKpi;
        var level = parseFloat(Math.random() * 3 + 0.1).toFixed(2);
        if (level >= 3) {
            level = 2.99;
        }
        var dataList = parseFloat(level * 100 / towerHight).toFixed(2);
        //渲染图表;
        this.makeBar(dataList, level, this.getBgColor(level), "charts");
        clearInterval(timerKpi);
        const _this = this;
        setInterval(function () {
            var level = parseFloat(Math.random() * 3 + 0.1).toFixed(2);
            if (level >= 3) {
                level = 2.99;
            }
            var dataList = parseFloat(level * 100 / towerHight).toFixed(2);
            //渲染图表;
            _this.makeBar(dataList, level, _this.getBgColor(level), "charts");
        }, 3000);
    },
    // 基于准备好的dom，初始化echarts实例;
    makeBar(dataList, level, colorList, id) {
        this.myChart = echarts.init(this.$el, 'macarons')
        this.option = {
            tooltip: {
                trigger: 'none'
            },
            xAxis: {
                data: [''],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            series: [{
                name: '最上层立体圆',
                type: 'pictorialBar',
                animation: false,
                symbolSize: [300, 45],
                symbolOffset: [0, -20],
                z: 12,
                itemStyle: {
                    normal: {
                        color: '#363F5E'
                    }
                },
                data: [{
                    value: 100,
                    symbolPosition: 'end'
                }]
            }, {
                name: '中间立体圆',
                animation: false,
                type: 'pictorialBar',
                symbolSize: [300, 45],
                symbolOffset: [0, -20],
                z: 12,
                itemStyle: {
                    normal: {
                        color: colorList
                    }
                },
                data: [{
                    value: dataList,
                    symbolPosition: 'end'
                }]
            }, {
                name: '最底部立体圆',
                animation: false,
                type: 'pictorialBar',
                symbolSize: [300, 45],
                symbolOffset: [0, 20],
                z: 12,
                itemStyle: {
                    normal: {
                        color: colorList
                    }
                },
                data: [100 - dataList]
            }, {
                //底部立体柱
                stack: '1',
                animation: false,
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: colorList,
                        opacity: .7
                    }
                },
                label: {
                    show: true,
                    position: 'inside',
                    color: "#FFFE00",
                    fontSize: 50,
                    formatter: function () {
                        return level + " 米";
                    }
                },
                silent: true,
                barWidth: 300,
                barGap: '-100%', // Make series be overlap
                data: [dataList]
            }, {
                //上部立体柱
                stack: '1',
                type: 'bar',
                animation: false,
                itemStyle: {
                    normal: {
                        color: '#36405E',
                        opacity: .7
                    }
                },
                silent: true,
                barWidth: 300,
                barGap: '-100%', // Make series be overlap
                data: [100 - dataList]
            }]
        };

        this.myChart.setOption(this.option);
        window.addEventListener("resize", function () {
            this.myChart.resize();
        });
    },
    //获取背景色;
    getBgColor(num) {
        var min = '1', max = '2';
        if (num > max) {
            return '#DB2F2C'
        }

        if (num >= min && num <= max) {
            return '#438a7a'
        }

        if (num < min) {
            return '#3EC6F0'
        }
    }
}
}
</script>

<style>

.chart{
    background-size: 60% 60%;
    /* background:rgba(34,34,34,0.5); */
}


</style>

二、水球图

1、vue中使用水球图

效果：

 2、代码实现

1）依赖下载

npm install e[email protected] --save
npm install [email protected] --save

2）源码

<template>
    <div class='wrapper'>
        <div class="inner">
            <div class='chart' id='chart'></div>
            <div class="btm"></div>
        </div>
    </div>
</template>
  
  <script>
    import 'echarts-liquidfill'    
    import * as echarts from 'echarts'
    require('echarts/theme/macarons') // echarts theme
    export default {
        props: {
            className: {
            type: String,
                default: 'chart'
            },
            width: {
            type: String,
            default: '300px'
            },
            height: {
            type: String,
            default: '300px'
            },
            optionTest:{}
        },
        data () {
            return {}
        },
        mounted () {
        this.drawChart()
        },
        methods: {
        drawChart () {
            // 基于准备好的dom，初始化echarts实例
            // let chart = echarts.init(this.$el, 'macarons')
            let chart = echarts.init(document.getElementById('chart'))
            // 监听屏幕变化自动缩放图表
            window.addEventListener('resize', function () {
            chart.resize()
            })
            // 绘制图表
            chart.setOption({
            // 图表主标题
            title: {
                text: '全国就业率', // 主标题文本，支持使用 \n 换行
                top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
                left: 'center', // 值: 'left', 'center', 'right' 同上
                textStyle: { // 文本样式
                fontSize: 30,
                fontWeight: 600,
                color: 'black'
                }
            },
            // 提示框组件
            tooltip: {
                trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                textStyle: {
                color: '#fff' // 文字颜色
                },
                // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                // 水球图: {a}（系列名称），{b}（无），{c}（数值）
                // 使用函数模板   传入的数据值 -> value: number|Array,
                formatter: function (value) {
                return value.seriesName + ': ' + value.data * 100 + '%'
                }
            },
            series: [{
                type: 'liquidFill',
                name: '全国就业率', // 系列名称，用于tooltip的显示，legend 的图例筛选
                radius: '62%', // 水球图的半径
                center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形  
                // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
                shape: 'circle',
                phase: 0, // 波的相位弧度 不设置  默认自动
                direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
                outline: {
                show: true,
                borderDistance: 0, // 边框线与图表的距离 数字
                itemStyle: {
                    opacity: 1, // 边框的透明度   默认为 1
                    borderWidth: 1, // 边框的宽度
                    shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                    shadowColor: '#fff', // 边框的阴影颜色,
                    borderColor: '#41dcd8' // 边框颜色
                }
                },
                // 图形样式
                itemStyle: {
                color: '#4077eb', // 水球显示的背景颜色
                opacity: 0.5, // 波浪的透明度
                shadowBlur: 10 // 波浪的阴影范围
                },
                backgroundStyle: {
                color: '#407bf3', // 水球未到的背景颜色
                opacity: 0.5
                },
                // 图形的高亮样式
                emphasis: {
                itemStyle: {
                    opacity: 0.8 // 鼠标经过波浪颜色的透明度
                }
                },
                // 图形上的文本标签
                label: {
                fontSize: 55,
                fontWeight: 400,
                color: '#fff'
                },
                data: [0.62] // 系列中的数据内容数组
            }]
            })
        }
        }
    }
  </script>
  
  <style scoped>
    .wrapper {
        width: 100%;
    }
    .wrapper .inner {
        position: relative;
        width: 50%;
        height: 500px;
        border: 1px solid #eeeeee;
        margin: 100px 50px 0;
        background: url(../../../assets/images/bg.png) no-repeat;
        background-size: 100% 100%;
    }
    .wrapper .inner .chart {
        width: 400px;
        height: 400px;
        background: url(../../../assets/images/fill-border.gif) no-repeat center bottom;
        background-size: 80% 80%;
        margin: 10px auto 0;
    }
    .wrapper .inner .btm {
        width: 320px;
        height: 25px;
        background: url(../../../assets/images/icon-bot.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
    }
  </style>
  

三、液位柱子图

1、vue中使用液位柱子图

效果：

 2、代码实现

<template>
    <div class='chart' id='chart'></div>
</template>

<script>
    import 'echarts-liquidfill'
    import * as echarts from 'echarts'
    require('echarts/theme/macarons') // echarts theme
    export default {
        data() {
            return {
                maxData: 100,
                value: 50
            }
        },
        mounted() {
            this.drawChart()
        },
        methods: {
            drawChart() {
                // 基于准备好的dom，初始化echarts实例
                // let chart = echarts.init(this.$el, 'macarons')
                let chart = echarts.init(document.getElementById('chart'))
                // 监听屏幕变化自动缩放图表
                window.addEventListener('resize', function () {
                    chart.resize()
                })
                // 绘制图表
                chart.setOption({
                    xAxis: {
                        show: false,
                        data: [0],
                    },
                    yAxis: {
                        max: this.maxData,
                        type: 'value',
                        show: false,
                    },
                    grid: {
                        top: '15',
                        bottom: '-5',
                        right: '0',
                        left: '-30',
                        containLabel: true,
                    },
                    series: [
                        {
                            // 柱子
                            type: 'bar',
                            barWidth: 60,
                            showBackground: true,
                            // label: {
                            //   show: true,
                            //   formatter: '{c}%',
                            //   color: 'white',
                            //   align: 'center',
                            //   verticalAlign: 'middle',
                            // },
                            backgroundStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgb(46 178 255)' },
                                    { offset: 1, color: 'white' },
                                ]),
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    { offset: 0, color: '#0095ff' },
                                    { offset: 0.5, color: '#04e6fd' },
                                    { offset: 1, color: '#0095ff' },
                                ]),
                            },
                            data: [this.value],
                            z: 1,
                        },
                        {
                            type: 'scatter',
                            data: [this.value > 100 ? 100 : this.value],
                            symbolSize: [60, 16],
                            label: {
                                show: true,
                                color: 'white',
                                formatter: `${this.value}%`,
                                offset: [0, 1]
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    { offset: 0, color: '#0095ff' },
                                    { offset: 1, color: '#48fcff' },
                                ]),
                            },
                            cursor: 'auto',
                            emphasis: {
                                disabled: true,
                            },
                            z: 11
                        },
                        {
                            // 顶盖
                            type: 'pictorialBar',
                            animationDuration: 0,
                            barWidth: '60',
                            symbolSize: ['100%', 16],
                            symbolRepeat: false,
                            symbolMargin: '0',
                            symbolPosition: 'end',
                            symbolOffset: [0, -8],
                            symbolBoundingData: this.maxData,
                            legendHoverLink: false,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    { offset: 0, color: '#0059a5' },
                                    { offset: 1, color: '#0095ff' },
                                ]),
                            },
                            cursor: 'auto',
                            emphasis: {
                                disabled: true,
                            },
                            data: [0],
                            z: 10,
                        },
                        {
                            // 底座
                            type: 'pictorialBar',
                            animationDuration: 0,
                            barWidth: '60',
                            symbolRepeat: false,
                            symbolMargin: '0',
                            symbolPosition: 'start',
                            symbolOffset: [0, 8],
                            symbolSize: ['100%', 16],
                            symbolBoundingData: this.maxData,
                            legendHoverLink: false,
                            emphasis: {
                                disabled: true,
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    { offset: 0, color: '#0095ff' },
                                    { offset: 1, color: '#48fcff' },
                                ]),
                            },
                            data: [0],
                            z: 10,
                        },
                    ],
                })
            }
        }
    }
</script>

<style scoped>
    .chart {
        width: 400px;
        height: 400px;
    }
</style>