Echarts实现堆叠图

先看图：

完整代码：

<template><div class="echart-sheet" style="background-color: #ffffff"><!--堆叠条形图--><div id="main" style="width: 100%; height: 800px;"></div></div></template>
<script>
import echarts from 'echarts'export default {name: "index",data() {return {data1: [],data2: [],data3: [],}},mounted() {this.draw()},methods: {draw() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));let y1 = [10,20,30]let y2 = [10,20,30]let y3 = [10,20,30]let y4 = [10,20,30]var option1 = {tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'line'        // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['x1', 'x2', 'x3'],splitLine: {show: false},//去除网格线}],yAxis: [{type: 'value',}],series: [{name: '记录数',type: 'bar',stack: '1',emphasis: {focus: 'series'},label: {show: true,formatter: '{c}%'},data: y1},{name: '值',type: 'bar',stack: '1',emphasis: {focus: 'series'},label: {show: true,formatter: '{c}%'},data: y3},{name: '记录数',type: 'bar',stack: '1',emphasis: {focus: 'series'},label: {show: true,formatter: '{c}%'},data: y4},{name: '值',type: 'bar',stack: '1',data: y2,emphasis: {focus: 'series'},label: {show: true,formatter: '{c}%'},// markLine: {//     lineStyle: {//         type: 'dashed'//     },//     data: [//         [{type: 'min'}, {type: 'max'}]//     ]// }}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option1);}}
}
</script><style scoped></style>

Echarts实现堆叠图相关推荐

echarts堆叠图tooltip中如何仅展示鼠标当前位置相应的指标数据
项目创建到现在快小半年了,期间遇到了大大小小非常多的问题,在不断遇到问题和解决问题的过程中,对vue和element-ui还有echarts的认知一点点的加深,也累积了不少对应各种问题的奇技淫巧.记录 ...
JavaScript实现堆叠图echarts
echarts.js下载链接提取码:qj3g 根据以下数据实现堆叠图堆叠图数据男女 20~29岁 4 6 30~39岁 0 3 40~49岁 1 0 代码 <!DOCTYPE html& ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
【Echarts】中国地图、堆叠图、横向柱状图
封装一个监听窗口变化,自适应图像大小的混入对象: 混入对象:一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. chart ...
echarts入门常用图表（柱状堆叠图）
echarts堆叠图柱状图的核心代码是在series中设置stack,拿官网的示例来讲,stack里内容相同的为一组堆叠效果图步骤步骤一:引入echarts.js <script src= ...
echarts 柱状堆叠图（图例和x轴都是动态的）
问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 .图例(legend),x轴(xAxis)都是写死的.但是一般实际应用中都是动态的.下面就举个例子,实现图例和x轴都是动态的 ...
Echarts-阶梯折线堆叠图 - x、y轴动态获取
Echarts-阶梯折线堆叠图 - x.y轴动态获取最终样式数据格式 Echarts配置详情请参考: Echarts官网最终样式数据格式 "data": [[467,-4 ...
【Vue】Vue 项目前、后端整合(图表二：产品月销曲线堆叠图)
文章目录 Vue 项目前.后端整合(图表二:产品月销曲线堆叠图) 一.配置图表二 1.基本结构搭建 2.Axios 请求数据 3.图表获取数据配置 4.图标丰富 (1)字体颜色 (2)设置提示框组件 ...
ggplot2版聚类物种丰度堆叠图
文章目录写在前面加载依赖关系导入数据 ggtree绘制聚类树物种组成数据整理成facet需要的格式保证颜色填充独立性分面组合树和柱图修改配色 ggtree调整布局添加样本其他信息树 ...

Echarts实现堆叠图

Echarts实现堆叠图相关推荐

最新文章

热门文章