vue内使用echarts

18年下班年用的vue + echarts,现在才想起来总结,着实不敬业

线上的项目叫股往http://rich.xchol.com/#/

好了,进入正题:

首先,需要新建一个vue的项目,在vue项目的基础上,安装echarts的依赖

npm install echarts -S
全局引入echarts

第一步:找到src文件下的main.js第二步:
import echarts from ‘echarts‘
Vue.prototype.$echarts = echarts 

页面里可以通过$echarts来使用echarts

如图:

好了,接下来就是vue + echarts联用了

先看一下,正常的echarts展示需要哪些数据

option = {
    title: {
        text: ‘折线图堆叠‘
    },
    tooltip: {
        trigger: ‘axis‘
    },
    legend: {
        data:[‘邮件营销‘,‘联盟广告‘,‘视频广告‘,‘直接访问‘,‘搜索引擎‘]
    },
    grid: {
        left: ‘3%‘,
        right: ‘4%‘,
        bottom: ‘3%‘,
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: ‘category‘,
        boundaryGap: false,
        data: [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘]
    },
    yAxis: {
        type: ‘value‘
    },
    series: [
        {
            name:‘邮件营销‘,
            type:‘line‘,
            stack: ‘总量‘,
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:‘联盟广告‘,
            type:‘line‘,
            stack: ‘总量‘,
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:‘视频广告‘,
            type:‘line‘,
            stack: ‘总量‘,
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:‘直接访问‘,
            type:‘line‘,
            stack: ‘总量‘,
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:‘搜索引擎‘,
            type:‘line‘,
            stack: ‘总量‘,
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

下图为呈现的效果

可以看到,简单的折现统计图,需要的数据data里的具体内容对于echarts来说,初始化相当重要,所以,不论是新建一个组件、还是直接写在页面内,初始化都是必要的,即使是展示或隐藏任意折现图,都要初始化(这里有个小坑,如果数据变化没有初始化,是不会展示相应的折线图的)

我的是将需要改变的值封在组建里,idName以及dataJson是我要用的数据或数据集合

dataY是纵轴的数据集合,如果监听到它的变化,就会重新初始化echarts,父组件通过props传数据给子组件

而通用的data里的数据,在页面data内直接写

dataArr: {
                    legend: {
                        type: ‘scroll‘,
                        data: [],
                        left: 0,
                        top: 30,
                        height: ‘‘,
                    },
                    tooltip: {
                        trigger: ‘axis‘,
                        confine: true,
                        textStyle: {
                            align: ‘left‘
                        }
                    },
                    toolbox: {
                        left: 0,
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            dataZoom: {
                                show: true
                            },
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: [‘line‘, ‘line‘]
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    grid: {
                        left: 0, //grid 组件离容器左侧的距离。
                        top: 70,
                        right: 0,
                        containLabel: true
                    },
                    xAxis: {
                        data: []
                    },
                    yAxis: [],
                    dataZoom: [{
                        type: ‘inside‘,
                        start: 0,
                        end: 100
                    }, {
                        start: 0,
                        end: 100,
                        handleIcon: ‘M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z‘,
                        handleSize: ‘100%‘,
                        handleStyle: {
                            color: ‘#fff‘,
                            shadowBlur: 3,
                            shadowColor: ‘rgba(0, 0, 0, 0.6)‘,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: []
                }

具体的echarts数据交互,可以直接看echarts的文档,https://echarts.baidu.com/api.html#echarts

代码如此简单,竟引无数英雄在此折腰

有不明白的、或者自己特有的问题,可以评论或直接找我哦

知无不言、言无不尽



原文地址:https://www.cnblogs.com/tongjiaojiao/p/10489129.html

时间: 2024-10-09 00:21:16

vue内使用echarts的相关文章

vue项目整合echarts

准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或  cnpm install echarts -S 安装完成之后,我们就可以开始引入我们需要的echarts了,接下来介绍几种使用echarts的方式. 1.全局引用 首先在main.js中引入echarts,将其绑定到vue原型上: import echarts from 'echarts' Vue.

vue+vuex+axios+echarts画一个动态更新的中国地图

一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save # 安装 ECharts npm install echarts --save 二. 项目结构 ├── ind

Vue 内联样式的数据绑定

Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">内联样式绑定</div> </div> <script> new Vue({ el: '#app', data: { activeColor

webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | | |---index | | | |-- views # 存放所有vue页面文件 | | | | |-- index.vue | | | | |-- list.vue | | | |-- components # 存放vue公用的组件 | | | |-- js

VUE中使用Echarts绘制柱状图

在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts import echarts from 'echarts'; 实现柱状图显示 <div style="width: 100%;height: 50%;border:1px solid rgb(180,180,180);top: 0px" id="echartss"

vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图,内有详细注释,我就懒得解释了,vue cli制作疫情地图 代码略有不同哦~~~

我的代码自我感觉----注释一向十分详细,就不用过多解释都是什么了~~ 因为最近疫情期间在家实在是没事干,想找点事,就练手了个小demo 首先上 NuxtJs版本代码,这里面 export default { mode: 'universal', /* ** Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewpor

vue内置指令与自定义指令

一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例如:v-on:click  v-on:keyup 3.v-model:数据双向绑定:用于表单输入等:例如:<input v-model="message"> 4.v-show:条件渲染指令,为DOM设置css的style属性 5.v-if:条件渲染指令,动态在DOM内添加或删除

vue内置指令详解——小白速会

指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  等等 主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="ur

vue 中使用 echarts 自适应问题

echarts 自带的自适应方法  resize() 具体用法: let xxEcharts = this.$echarts.init(document.getElementById('xxx')) xxEcharts.setOption(xxxx)  // 参数是 echarts 的option对象 window.onresize = xxEcharts.resize 但是,问题来了,同一个页面使用多个echarts 的时候,window.onresize = xxEcharts.resize