快速上手eCharts

最新推荐文章于 2023-06-07 00:39:35 发布

~那一刻~

最新推荐文章于 2023-06-07 00:39:35 发布

阅读量156

点赞数

分类专栏： eCharts 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45045593/article/details/108197350

版权

eCharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先看效果图
通过npm安装
npm install echarts --save
在main.js中引入

import echarts from 'echarts';	//引入eCharts
Vue.prototype.$echarts = echarts	//挂在到vue原型上

在组件中使用

<template>
    <div id="app">
    	//在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器
        <div id="main" style="width: 100%;height:600px; display: flex"></div>
    </div>
</template>
<script>
export default {
    name: 'eCharts',
    data() {
        return {
            penetrationList: [25, 20, 36, 60, 40, 90, 10, 20], //渗透
        };
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            let option = {
                tooltip: {},
                legend: {
                    data: ['渗透率'],
                    bottom: 'auto',
                },
                xAxis: [
                    {
                        name: '发布行为',
                        nameLocation: 'start',
                        nameTextStyle: {
                            verticalAlign: 'top',
                            lineHeight: 56,
                            color: '#000',
                            fontWeight: 'bold',
                        },
                        type: 'category',
                        data: ['1次', '2次', '3次', '4次', '5次', '6次', '7次', '8次及以上'],
                    },
                ],
                yAxis: [
                    {
                        name: '行为详情',
                        nameTextStyle: {
                            verticalAlign: 'bottom',
                            lineHeight: 56,
                            color: '#000',
                            fontWeight: 'bold',
                            align: 'right',
                        }
                ],
                series: [
                    {
                        name: '渗透率',
                        type: 'bar',
                        barGap: 0,
                        data: this.penetrationList,
                    }
                ],
            };
            myChart.setOption(option, true);
            //eCharts图表响应式
            window.onresize = function () {
                myChart.resize();
            }
        },
    },
    mounted() {
        this.drawChart();
    },
};
</script>