Vue中echarts的基本用法

Posted flower8

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中echarts的基本用法相关的知识,希望对你有一定的参考价值。

前言:同大多数的前端框架一样,先读官网的使用方法。学会基本使用后,在实例中找到自己想要demo。拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用。

我是在vue中下面直接使用的echarts。下面按步骤讲解。

第一步:安装echarts依赖包,然后引入,注意最好在当前使用的组件中引入,而不需要在main.js中注册。

//1.首先引入
import echarts from "echarts";

第二步:在页面中创建一个盒子,用来装载图表

<!-- 2.为echarts准备一个具备大小的DOM -->
<div id="main" style="width:400px;height:350px;backgroundColor:‘pink‘"></div>

第三步:在js中初始化实例,这里我写到vue组件的mounted钩子函数中了

// 3.基于准备好的dom,初始化echarts实例
 var myChart = echarts.init(document.getElementById("main"));

第四步:也是最重要的一步,将所找到的demo的options放在本组件的data中。echarts的渲染主要是因为options指定的方式不同

//第四步
        option : {
            title: {
                text: ‘缺陷统计‘,
                // subtext: ‘纯属虚构‘,
                left: ‘center‘
            },
            tooltip: {
                trigger: ‘item‘,
                formatter: ‘{a} <br/>{b} : {c} ({d}%)‘
            },
            color:[‘green‘, ‘orange‘,‘pink‘,‘#010101‘],
            legend: {
                orient: ‘vertical‘,
                left: ‘left‘,
                data: [‘无缺陷‘,‘一般缺陷‘, ‘严重缺陷‘, ‘危急缺陷‘]
            },
            series: [
                {
                    name: ‘访问来源‘,
                    type: ‘pie‘,
                    radius: ‘55%‘,
                    center: [‘50%‘, ‘60%‘],
                    data: [
                        {value: 833, name: ‘无缺陷‘},
                        {value: 335, name: ‘一般缺陷‘},
                        {value: 80, name: ‘严重缺陷‘},
                        {value: 9, name: ‘危急缺陷‘},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: ‘rgba(0, 0, 0, 0.5)‘
                        }
                    }
                }
            ]
        },

第五步:最后一步。还是在mounted函数中,将刚才的options设置到声明的实例中。

//5.使用刚指定的配置项和数据显示图表。
myChart.setOption(this.option);

这样,一个echarts的简单图表实例就形成了,下面是效果图

技术图片

以上是关于Vue中echarts的基本用法的主要内容,如果未能解决你的问题,请参考以下文章

32-Vue之ECharts-雷达图

31-Vue之ECharts-饼图

Echarts基本图表的学习笔记

vue 中使用 echarts 自适应问题

33-Vue之ECharts-仪表盘图

vue2中使用echarts折线图