vue3中，echarts使用（四）01——柱状图之堆叠条形图-官网示例

vue3中，echarts使用（四）01——柱状图之堆叠条形图-官网示例

效果

代码

index.vue

import * as echarts from 'echarts'; type EChartsOption = echarts.EChartsOption; var chartDom = document.getElementById('main')!; var myChart = echarts.init(chartDom); var option: EChartsOption; option = { 
    tooltip: { 
    trigger: 'axis', axisPointer: { 
    // Use axis to trigger tooltip type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' } }, legend: { 
   }, grid: { 
    left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { 
    type: 'value' }, yAxis: { 
    type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, series: [ { 
    name: 'Direct', type: 'bar', stack: 'total', label: { 
    show: true }, emphasis: { 
    focus: 'series' }, data: [320, 302, 301, 334, 390, 330, 320] }, { 
    name: 'Mail Ad', type: 'bar', stack: 'total', label: { 
    show: true }, emphasis: { 
    focus: 'series' }, data: [120, 132, 101, 134, 90, 230, 210] }, { 
    name: 'Affiliate Ad', type: 'bar', stack: 'total', label: { 
    show: true }, emphasis: { 
    focus: 'series' }, data: [220, 182, 191, 234, 290, 330, 310] }, { 
    name: 'Video Ad', type: 'bar', stack: 'total', label: { 
    show: true }, emphasis: { 
    focus: 'series' }, data: [150, 212, 201, 154, 190, 330, 410] }, { 
    name: 'Search Engine', type: 'bar', stack: 'total', label: { 
    show: true }, emphasis: { 
    focus: 'series' }, data: [820, 832, 901, 934, 1290, 1330, 1320] } ] }; option && myChart.setOption(option); 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10861.html