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的简单图表实例就形成了,下面是效果图

原文地址:https://www.cnblogs.com/flower8/p/12204768.html

时间: 2024-09-28 11:45:31

Vue中echarts的基本用法的相关文章

详解Vue中watch的高级用法

我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName. handler方法和immediate属性 这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算.那我们想要一开始就让他最初绑定的时候就执行改怎么办呢?我们需要修改一下我们的 watch 写法,修改过后的 wa

vue中watch的详细用法

在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) 直接写一个监听处理函数,当每次监听到 cityNam

vue中e-charts的基本使用

1.安装e-charts项目依赖 npm install echarts --save 或者 npm install echarts -S 2.引入项目中 全局引入(main.js) import echarts from 'echarts' Vue.prototype.$echarts = echarts 这种方法是直接绑定在vue实例上,所以在项目中任何页面,直接 this.$echarts 即可 局部引入(需要的页面进行引入) import echarts from 'echarts' 3

VUE中关于$emit的用法

一.事件 关于什么是JavaScript事件可以参考:https://www.w3schools.com/js/js_events.asp 二.$emit vue中对$emit的定义见: vm.$emit( eventName, [-args] ) 参数: {string} eventName [...args] 触发当前实例上的事件.附加参数都会传给监听器回调. 三.用途与示例 1.父组件可以使用 props 把数据传给子组件. 1.子组件可以使用 $emit 触发父组件的自定义事件. 子组件

vue 中的key 的用法

(Emitted value instead of an instance of Error) <router-link v-for="item in mycrowdJoinArr">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. 我们有的时候会在npm run dev的时候  发

vue中Echarts手动显示隐藏图表中的数据

1.将Echarts的数据格式放在data return中: 2.自定义按钮绑定一个单击事件: <button class="btn" @click="show()">隐藏按钮</button> 3.将该图标的格式传入单击事件函数中: show(){ this.option.legend.selected={"语文":false,"数学":false,"英语":false,"

Vue中watch的高级用法

<template> <div> <input type="text" v-model="value"> </div> </template> <script> export default { data() { return { value:null } }, created(){ this.test() }, methods: { test(){ console.log("第一个加

Vue中is属性的用法 可以动态切换组件

is 是组件的一个属性,用来展示组件的名称 is和component联用哈 <component :is="comName"> vue提供了component来展示对应的组件名称 compont是一个占位符,is这个属性,用来展示对应的组件名称 三个子组件 <template> <div> <h2>我是登录组件</h2> </div> </template> <template> <d

vue中钩子函数的用法

这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈. beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted: 在这发起后端请求,拿回数据,配合路由钩子做一些事情 beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容 当然,还有更多,继续探索中-- 原文地址:https://www.cnblogs.com/zr123/p