zoukankan      html  css  js  c++  java
  • vue 使用echarts 柱状图使用图片显示

     实现效果


    <template>
    <div id="myChart" class="percentage"></div>
    </template>

    <script>
    export default {
    name: 'Percentage',
    data () {
    return {
    txIcon: require('../../../assets/image/stanet/histogram-bj.png')
    }
    },
    mounted () {
    this.drawLine()
    },
    methods: {
    drawLine () {
    // 基于准备好的dom,初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
    title: {
    text: '数据状态所占比率',
    left: 'center',
    textStyle: {
    lineHeight: 47,
    color: '#123c80',
    fontSize: 12
    }
    },
    tooltip: {},
    xAxis: {
    data: ['正常', '报警', '未到', '非观测', '停机', '维护', '维修'],
    axisLabel: {
    interval: 0, // 横轴信息全部显示
    rotate: 0, // 角倾斜显示
    textStyle: {
    color: '#123c80',
    fontSize: 12
    }
    },
    axisTick: {
    interval: 0
    // alignWithLabel: true
    },
    splitArea: {
    interval: '0',
    show: true,
    areaStyle: {
    color: '#f6fbfe',
    opacity: 0.5
    }
    }
    },
    yAxis: {
    axisLabel: {
    textStyle: {
    color: '#123c80',
    fontSize: 12
    }
    },
    axisTick: {
    show: false
    },
    splitLine: {
    lineStyle: {
    // 使用深浅的间隔色
    color: '#8abfe2'
    }
    },
    axisLine: {
    lineStyle: {
    0
    }
    }
    },
    series: [{
    type: 'pictorialBar',
    data: [
    {
    value: 36,
    symbol: 'image://' + this.txIcon,
    symbolSize: [14, '100%']

    },
    {
    value: 34,
    symbol: 'image://' + this.txIcon,
    symbolSize: [14, '100%']
    },
    {
    value: 34,
    symbol: 'image://' + this.txIcon,
    symbolSize: [14, '100%']
    }, {
    value: 34,
    symbol: 'image://' + this.txIcon,
    symbolSize: [14, '100%']
    },
    {
    value: 34,
    symbol: 'image://' + this.txIcon,
    symbolSize: [14, '100%']
    },
    {
    value: 34,
    symbol: 'image://' + this.txIcon,
    symbolSize: [14, '100%']
    },
    {
    value: 34,
    symbol: 'image://' + this.txIcon,
    symbolSize: [14, '100%']
    }
    ]
    }]
    })
    }
    }
    }
    </script>

    <style scoped>
    .percentage {
    100%;
    height: 100%;
    /**/
    }
    </style>
  • 相关阅读:
    hive之insert导入分区数据
    Hive数据倾斜及优化方案
    Hive中join关键字运行机制及使用详解
    如何去编写一个定时器?
    MapReduce运行原理详解
    nfs共享服务搭建
    IDEA中Java方法的抽取
    阿里巴巴开发规约(Alibaba Java Coding Guidelines)安装介绍
    IDEA集成vue
    写给初学asp.net的新人们 新手学习经验
  • 原文地址:https://www.cnblogs.com/nixu/p/14962328.html
Copyright © 2011-2022 走看看