首页 > 其他分享 >echarts在同一个dom元素中创建两个图表

echarts在同一个dom元素中创建两个图表

时间:2023-04-13 15:44:56浏览次数:32  
标签:right name show true dom value 图表 type echarts

核心:使用grid进行分区

// 直角坐标系内绘图网格 左右通过left和right分 上下通过top和bottom分
grid: [
    { left: '10%', right: '55%', width: '30%' },
    { left: '55%', right: '10%', width: '30%' },
],

实例效果图:

 实例代码:

initEcharts() {
    var chartDom = document.getElementById('myChart')
    var myChart = echarts.init(chartDom)
    var option = {
        toolbox: {
            show: true,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            feature: {
                // 还原
                restore: {
                    show: true,
                },
                // 保存为图片
                saveAsImage: {
                    show: true,
                    // 保存图片的分辨率比例,可以设置为大于 1 的值
                    pixelRatio: 2,
                },
            },
        },
        // 直角坐标系内绘图网格
        grid: [
            { left: '10%', right: '55%', width: '30%' },
            { left: '55%', right: '10%', width: '30%' },
        ],
        xAxis: [
            {
                type: 'category',
                // 对应坐标轴所在grid的索引
                gridIndex: 0,
                data: ['2021', '2022'],
            },
        ],
        yAxis: [
            {
                type: 'value',
                gridIndex: 0,
                name: '计划量',
                // y轴网格线
                // splitLine: { show: false },
            },
            {
                type: 'value',
                gridIndex: 0,
                name: '完成量',
            },
        ],
        series: [
            {
                name: '计划量',
                type: 'bar',
                // 使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: [300, 410],
                barWidth: 20,
                label: {
                    show: true,
                    position: 'top',
                },
            },
            {
                name: '完成量',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: [150, 250],
                barWidth: 20,
                label: {
                    show: true,
                    position: 'top',
                },
            },
            {
                type: 'pie',
                //饼图你可以显示文字,data写法如下
                data: [
                    { name: 'Ⅰ类', value: 10 },
                    { name: 'Ⅱ类', value: 20 },
                    { name: 'Ⅲ类', value: 30 },
                    { name: 'Ⅳ类', value: 60 },
                ],
                //饼图位置
                left: 220,
                radius: 50,
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b} : {c}({d}%)',
                },
            },
        ],
    }
    myChart.setOption(option)
    this.chartObj = myChart
},

标签:right,name,show,true,dom,value,图表,type,echarts
From: https://www.cnblogs.com/nicoz/p/17315042.html

相关文章

  • org.dom4j.DocumentException: Connection timed out: connect Nested exception: Con
    今天用dom4j解析xml文件时遇到了一个问题org.dom4j.DocumentException:Connectiontimedout:connectNestedexception:Connectiontimedout:connect atorg.dom4j.io.SAXReader.read(SAXReader.java:484) atorg.dom4j.io.SAXReader.read(SAXReader.java:321) atcom......
  • There is a chart instance already initialized on the dom原因及解决办法
    原因:这是因为在我们重复使用了初始化了echars实例,每个组件使用时,如果调用两次及以上的初始化方法时,就会出现这个警告,并且如果是实时监控的标表,会出现浏览器卡顿及响应慢,因为要一直重新渲染新的Dom。解决办法,初始化代码只出现一次,js中只要执行一次实例化代码,VUE中调用生命周期moun......
  • UVa 350 Pseudo-Random Numbers (伪随机数的循环长度)
    350-Pseudo-RandomNumbersTimelimit:3.000secondshttp://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=100&page=show_problem&problem=286Computersnormallycannotgeneratereallyrandomnumbers,butfrequentlyar......
  • UVa 11205 The broken pedometer (枚举好题&巧用二进制)
    11205-ThebrokenpedometerTimelimit:3.000secondshttp://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=107&page=show_problem&problem=2146TheProblemAmarathonrunnerusesapedometerwithwhichheishavingpro......
  • numpy.random.choice(a, size=None, replace=True, p=None)
    importnumpyasnpimportrandomlist_a=["a","b","c","d","e","f","g"]get_=np.random.choice(list_a,4,replace=False)print(get_)输出:['a''f''c�......
  • mouted阶段无法通过querySelectAll获取dom元素
    要获取的元素是通过v-for渲染出来的时候,dom元素依赖的数据是通过异步请求获取的,mouted时v-for的数据还没有获取到,故没有元素产生,mouted无法获取元素,可以使用nexttick和watch结合来用,监听dom元素依赖的数据变化,用nextTick来管理数据,在数据获取之后再获取dom元素......
  • 迁移学习()《Attract, Perturb, and Explore: Learning a Feature Alignment Network fo
    论文信息论文标题:Attract,Perturb,andExplore:LearningaFeatureAlignmentNetworkforSemi-supervisedDomainAdaptation论文作者:TaekyungKim论文来源:2020ECCV论文地址:download 论文代码:download视屏讲解:click1摘要提出了目标域内的域内差异问题。提......
  • vue中使用echarts的两种方法
    vue中使用echarts的两种方法Postedon 2021-08-1518:59  书中枫叶 阅读(33524) 评论(1)  编辑  收藏  举报在vue中使用echarts有两种方法一、第一种方法1、通过npm获取echartsnpminstallecharts--save2、在vue项目中引入echarts在 main.js 中添加下......
  • 迁移学习《Cluster-Guided Semi-Supervised Domain Adaptation for Imbalanced Medica
    论文信息论文标题:Cluster-GuidedSemi-SupervisedDomainAdaptationforImbalancedMedicalImageClassification论文作者:S.Harada,RyomaBise,KengoAraki论文来源:ArXiv2March2023论文地址:download 论文代码:download视屏讲解:click1摘要一种半监督域自适应方法,......
  • d3.js制作蜂巢图表带动画效果
     以上是效果图,本图表使用d3.jsv4制作。图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子高亮显示,图表可以随浏览器任意缩放。 1.图表的主体结构是由正六边形组成,使用d3生成六边形可以使用d3-hexbin.js,生成六边形比较方便,只要给定中心点坐标和半径即可生......