echart 图例
说明:stack相同,两个bar合并但是不会重叠
如果需要重叠 用barGap: '-100%', 根据不同的需求来使用两者。
<template>
<div>
echart
<div id="id" style="width: 1000px;height:400px;margin:0 auto;"> </div>
</div>
</template> <script>
import Vue from 'vue'
import echarts from 'echarts'
export default {
name: 'echart',
data () {
return { }
},
methods: {
echart(){
let myChart = echarts.init(document.getElementById('id'));
let option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['整改剩余量', '整改总数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value'
},
xAxis: {
type: 'category',
data: ['职业为空','地址为空','证件到期日为空','联系方式为空','户名为空','性别为空','国籍为空']
},
series: [ {
name: '整改剩余量',
type: 'bar',
// stack: '1',
barGap: '-100%',
z: 10,
barWidth:60,
barMinHeight:15,
color:'#F56C6C',
label: {
normal: {
show: true,
position: 'inside',
}
},
data: [1, 212, 201, 154, 190, 330, 300]
},
{
name: '整改总数',
type: 'bar',
barWidth:60,
// stack: '1',
barMinHeight:25,
color:'#409EFF',
label: {
normal: {
show: true,
position: 'top'
}
},
data: [2, 832, 901, 934, 1290, 1330, 10000]
}
]
};
myChart.setOption(option);
}
},
mounted() {
this.echart()
}, } </script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>
echart 图例的更多相关文章
- echart 图例设置自定义图标?
option = { legend: { orient: 'horizontal', // 'vertical' x: 'right', // 'center' | 'left' | {number} ...
- EChart处理三维数据做图表、多维legend图例处理
处理三维数据做图表,比如返回的数据就是一个个list,list里面某几个数据同属于一个维度,项目中的实例效果如下: 上面的khfx会有多个,比如db1.db2.db3等,下面的那些数据也会变化,目前需 ...
- echart 饼图图例legend支持滑动
ps: 以下针对option操作 文章目录 图例过多加上滚动条图例形状图例自定义显示图例过多加上滚动条 legend:{ top:'50', bottom:'50', type:'scroll',} ...
- WebGIS中利用AGS JS+eChart实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...
- java 版本EChart使用
一.简介 EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计.该种方式js在页面动态拼接json数据,再进行渲染.这种方法的优点是,灵活,可以随时进行修改.缺点 ...
- 百度数据可视化图表套件echart实战
最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...
- e-chart 本地加载中国地图
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Echart的简单例子
[转载自:http://echarts.baidu.com/echarts2/doc/start.html] <%@ page language="java" content ...
- EChart使用简单介绍
Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,使用内容做简单记录:(EChart下载地址 http://echarts.baidu.com/download.html) 1.ti ...
随机推荐
- IDE 热部署配置
从eclipse切换到IDE,遇到应用不能热部署问题,解决如下 1.tomcat 中server配置下面三点需要注意 2.tomcat的deployment 中 需要选择war exploded而不是 ...
- ASP.NET MVC 3 Application Upgrader
ASP.NET MVC 3 Application Upgrader: http://aspnet.codeplex.com/releases/view/59008
- docker:学习笔记
docker run -itd --net=none 22565cef72c2 /usr/sbin/sshd -Dpipework br0 5a3e7bab4c5c5260a93e153aa7fec3 ...
- LeetCode 86. Partition List 划分链表 C++
Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...
- TCP协议-连接建立和释放
三次握手: (1)客户端向服务器端TCP请求连接,向服务器端发送控制位SYN=1,序号seq=x的请求报文.(x是随机产生的,且不能为0) (2)服务器端接收到请求报文后,若同意建立连接,则向客户端发 ...
- ORM版学员管理系统
ORM版学员管理系统 班级表 表结构 class Class(models.Model): id = models.AutoField(primary_key=True) # 主键 cname = m ...
- SpringCloud系列四:Eureka 服务发现框架(定义 Eureka 服务端、Eureka 服务信息、Eureka 发现管理、Eureka 安全配置、Eureka-HA(高可用) 机制、Eureka 服务打包部署)
1.概念:Eureka 服务发现框架 2.具体内容 对于服务发现框架可以简单的理解为服务的注册以及使用操作步骤,例如:在 ZooKeeper 组件,这个组件里面已经明确的描述了一个服务的注册以及发现操 ...
- python学习 生成随机函数 random模块的用法
random模块是用于生成随机数 常用函数 函数 含义 random() 生成一个[0,1.0)之间的随机浮点数 uniform(a,b) 生成一个a到b之间的随机浮点数 randint(a,b) 生 ...
- Linux命令:pushd
语法 pushd [-n] [+N | -N | dir] 更改新目录并(或)压栈,或者把栈里的某个目录推到栈顶. 说明 pushd dir # 切换到目标目录dir,并将dir压栈. pushd # ...
- javaSE基础知识
JVM,JRE,JDK三者的简单总结 1.见名解释 Java虚拟机(JVM):Java virtual machine简称JVM:“virtual”中文意思“虚拟的”,“machine”中文意思“机器 ...