vue导入echarts

最新推荐文章于 2024-02-08 13:43:38 发布

Lei_zhen96

最新推荐文章于 2024-02-08 13:43:38 发布

阅读量754

点赞数 1

本文链接：https://blog.csdn.net/Lei_zhen96/article/details/82113878

版权

1.首先安装echarts

npm install echarts --save

2.在mian.js中使用echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

<template>

    <div>

        <div id="main" style="width: 600px;height: 400px;"></div>        //饼状图

        <div id="list" style="width: 600px;height: 400px;"></div>       //柱形图

    </div>

</template>

<script>
import echarts from 'echarts'

export default {
    name:'hostlist',
    data(){
        return{
            charts: '',
            opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
            opinionData:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    },
    mounted(){
        this.$nextTick(function() {
            this.drawPie('main')
            this.dramlist('list')
        })
    },
    methods:{
        drawPie(id){
            this.charts = echarts.init(document.getElementById(id))
            this.charts.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/>{b}:{c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data:this.opinion
                },
                series: [{
                    name:'访问来源',
                    type:'pie',
                    radius:['50%','70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                            fontSize: '30',
                            fontWeight: 'blod'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:this.opinionData
                }]
            })
        },
        dramlist(id){
            this.charts = echarts.init(document.getElementById(id))
            this.charts.setOption({
                title:{
                    text:'列表'
                },
                tooltip:{},
                legend:{
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            })
        }
    }
}
</script>