一:

<template>
<Layout>
<Content>
<Card :style="{minHeight:'300px'}">
<div id="myChart"></div>
</Card>
</Content>
</Layout>
</template> <script>
export default {
mounted () {
// 调用绘制图表的方法
this.draw();
},
methods: {
draw () {
// 实例化echarts对象
let myChartDrawer = this.$echarts.init(document.getElementById('myChart')) // 绘制条形图
var option = {
title: {
text: '地区点位、设备核对进度',
top: 5,
left: 'center'
},
legend: {
data: ['衣服', '帽子'],
top: 30
},
// X轴
xAxis: {
data: [
'一月', '二月', '三月', '四月', '五月'
]
},
// Y轴
yAxis: {},
// 数据
series: [
{
name: '衣服',
type: 'bar',
data: [120, 100, 440, 320, 150]
},
{
name: '帽子',
type: 'bar',
data: [200, 120, 240, 330, 170]
}
/*{
name: 'bar',
type: 'line',
data: [120, 200, 240, 260, 300]
},
{
name: 'bar',
type: 'line',
data: [120, 200, 300, 140, 260]
}*/
]
}; myChartDrawer.setOption(option);
}
}
}
</script> <style scoped>
#myChart {
width: 70%;
min-height: 300px;
clear: both;
box-sizing: border-box;
margin: 30px auto;
}
</style>

这边,

this.$echarts是因为我在其他地方已经全局引入过了。这边替换成你们自己的引入方式即可。

vue中使用echart柱状图的更多相关文章

  1. 如何在vue中使用echart

    1.安装echarts依赖   npm install echarts --save 2.在main.js中全局中引用 import echarts from 'echarts' Vue.protot ...

  2. 在Vue中使用Echart图表库。【全网最简单】

    使用npm安装echart npm install echarts --save 然后在使用的页面上直接import import echarts from "echarts"; ...

  3. IVIEW组件Table中加入EChart柱状图

    展示图如下: 主要利用了render函数和updated()钩子函数进行数据填充与渲染. 1.在Table的Colums中加入 1 { 2 title: '比例图', 3 align: 'center ...

  4. vue中监听window.resize的变化

    我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...

  5. 在Vue中echarts可视化组件的使用

    echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts ...

  6. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  7. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  8. echarts在vue中使用的感悟

    echarts在vue中使用的感悟 echarts作为图表展示的强大存在,每当使用后台系统,或多或少都会使用到,但是作为菜鸟的我,则是一路采坑,各种头大,比比皆是,为了避免下次再犯同样的错误,特意记录 ...

  9. echart 柱状图 两个纵轴坐标 刻度不一样

    在使用echart的过程中, 有的时候柱状图会使用两个纵坐标, 如果两个纵坐标的最大值是一样的还好,这样刻度也会一样. 但是多数情况下最大值是不一样的, 这样就造成了,刻度线很乱,显示不均匀. 解决办 ...

随机推荐

  1. iobit-unlocker --- 类似 Unlocker 工具,强制删除文件或文件夹

    win10 使用 Unlocker 1.9.2 常有问题,以前在win7上使用完全ok的 更换成:iobit-unlocker ,win10体验还可以,类似Unlocker 下载地址: https:/ ...

  2. 用GEOquery从GEO数据库下载数据--转载

    https://www.plob.org/article/9969.html Gene Expression Omnibus database (GEO)是由NCBI负责维护的一个数据库,设计初衷是为 ...

  3. Spark连续特征转化成离散特征

    当数据量很大的时候,分类任务通常使用[离散特征+LR]集成[连续特征+xgboost],如果把连续特征加入到LR.决策树中,容易造成overfit. 如果想用上连续型特征,使用集成学习集成多种算法是一 ...

  4. sql 时间段交叉查询是否有交集

    --双11活动结束时间大于当前服务器时间代表有效期的活动 --实现1 select * from ProdCar A where A.EndDate> GETDATE() and A.EndDa ...

  5. SQL 对比,移动累计

    数据对比 两种常用模型 1.对比下一行,判断增长.减少.维持现状 -- 建表 drop table sales create table sales( num int, soc int ); inse ...

  6. python 实现一个简单tcp epoll socket

    python 实现一个epoll server #!/usr/bin/env python #-*- coding:utf-8 -*- import socket import select impo ...

  7. UE4 Cel Shading(卡通渲染)

    转自:https://dawnarc.com/2018/01/ue4cel-shading%E5%8D%A1%E9%80%9A%E6%B8%B2%E6%9F%93/ Cel Shading Post ...

  8. vmware 虚拟机中有时获取不到IP地址

    转载: https://blog.csdn.net/valecalida/article/details/80683518 解决方法:打开vmware,然后找到编辑 然后点击虚拟网络编辑器 此时应该先 ...

  9. jquery关于on click事件的理解

    jquery关于on click事件的理解 <pre><a style="min-width:60px; margin-left:6px;" wenzhangid ...

  10. 最近公共祖先 LCA 递归非递归

    给定一棵二叉树,找到两个节点的最近公共父节点(LCA).最近公共祖先是两个节点的公共的祖先节点且具有最大深度.假设给出的两个节点都在树中存在. dfs递归写法 查找两个node的最近公共祖先,分三种情 ...