首页 > 其他分享 >Echarts——饼图折线图柱状图相互转换

Echarts——饼图折线图柱状图相互转换

时间:2022-10-11 15:23:48浏览次数:68  
标签:888.832 98.304 376.832 title 柱状图 折线图 413.696 true Echarts

前言

项目里使用的echarts版本是4.9.0,这里就用该版本做演示;

配置项: echarts option
codesandbox示例: Echarts数据转换

内容

鉴于echarts折线图和柱状图可以直接通过toolbox转换,所以我们只需要在toolbox中增加一个和饼图进行转换的方法即可

柱状图数据转换

barData() {
            let that = this
            let xAxisData = that.list.map((item) => item.name)
            let seriesData = that.list.map((item) => item.value)
            this.options = {
                title: {
                    ...dOptions.title,
                    text: this.title
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { readOnly: false },
                        myPie: {
                            show: true,
                            title: '切换为饼状图',
                            icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
                            onclick: function () {
                                that.pieData()
                                that.initChart()
                            }
                        },
                        magicType: { show: true, type: ['bar', 'line'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: seriesData,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            }
        },

折线图数据转换

 lineData() {
            let that = this
            let xAxisData = that.list.map((item) => item.name)
            let seriesData = that.list.map((item) => item.value)
            this.options = {
                title: {
                    ...dOptions.title,
                    text: this.title
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { readOnly: false },
                        myPie: {
                            show: true,
                            title: '切换为饼状图',
                            icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
                            onclick: function () {
                                that.pieData()
                                that.initChart()
                            }
                        },
                        magicType: { show: true, type: ['bar', 'line'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: seriesData,
                        type: 'line',
                        smooth: true
                    }
                ]
            }
        },

饼图数据转换

pieData() {
            let that = this
            this.options = {
                title: {
                    ...dOptions.title,
                    text: this.title
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { readOnly: false },
                        myPie: {
                            show: true,
                            title: '切换为饼状图',
                            icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
                            onclick: function () {
                                that.pieData()
                                that.initChart()
                            }
                        },
                        myBar: {
                            show: true,
                            title: '切换为柱状图',
                            icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
                            onclick: function () {
                                that.barData()
                                that.initChart()
                            }
                        },
                        myLine: {
                            show: true,
                            title: '切换为折线图',
                            icon: 'path://M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
                            onclick: function () {
                                that.lineData()
                                that.initChart()
                            }
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                color: ['#007950', '#0097AF', '#376BB9', '#DF993E', '#AD475F'],
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    icon: 'circle',
                    right: 6,
                    top: '20%',
                    width: '50%',
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        padding: 4,
                        rich: {
                            a: {
                                color: '#969AA8',
                                lineHeight: 30,
                                fontSize: 14,
                                width: 90
                            },
                            b: {
                                fontSize: 14,
                                fontWeight: 'bolder',
                                color: '#000'
                            }
                        }
                    },
                    data: that.list,
                    formatter: function (name) {
                        var total = 0
                        var target
                        for (var i = 0, l = that.list.length; i < l; i++) {
                            total += that.list[i].value
                            if (that.list[i].name == name) {
                                target = that.list[i].value
                            }
                        }
                        let nameResult = name.length > 6 ? name.slice(0, 6) + '...' : name
                        return '{b|' + ((target / total) * 100).toFixed(2) + '%}\n{a|' + nameResult + '}'
                    }
                },
                series: [
                    {
                        type: 'pie',
                        label: {
                            show: false
                        },
                        radius: [40, 75],
                        center: ['25%', '55%'],
                        data: that.list,
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                    }
                ]
            }
        },

echarts初始化

initChart() {
            this.chart = echarts.init(this.$el, 'macarons')
            this.chart.resize()
            this.chart.clear()
            this.chart.setOption(this.options, true)
        }

标签:888.832,98.304,376.832,title,柱状图,折线图,413.696,true,Echarts
From: https://www.cnblogs.com/wangyang0210/p/16779337.html

相关文章

  • Echarts社区地址
    Echarts社区已停止运营,下面存在开源网站第一个:www.isqqw.com/#/homepage,多个分类,可在线调试和切换版本。第二个:http://www.ppchart.com多个分类,可在线调试。新增一个网......
  • echarts图中显示不全问题
    解决方案:页面重绘后在执行绘图的代码。vue里面可以把绘图代码放到this.$nextTick里面描述:首先我们想点击页面上的按钮,弹出一个框,占页面width:80%,height:70%,里面的echar......
  • Vue3 Echarts 3D柱状图搭建
    最近学习大数据,需要数据可视化,所以特地去学习了一下echarts,通过springboot+vue整合了echarts三维柱状图。先看效果。  因为我是初学vue脚手架,对一些vue内置方法不是......
  • Echarts
    Echarts介绍D3.js是web端评价最高的JavaScript可视化工具库;ECharts.js是百度开发一个开源JavaScript可视化工具库;Highcharts.js是国外的一款可视化库,非商用免费,被......
  • leetcode84-柱状图中最大的矩形
    84.柱状图中最大的矩形 两个星期没写leetcode就连暴力解法都写不出了。暴力解法classSolution{public:intlargestRectangleArea(vector<int>&heights){......
  • ECharts数据可视化
    学习文档:https://blog.csdn.net/weixin_43883917/article/details/113886713https://www.runoob.com/echarts/echarts-tutorial.html1.使用CDN引入:StaticfileCDN(国内):<s......
  • Pyecharts基本图的使用
    概况:Echarts是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而Python是一门富有表达力的语言,很适合用于数据处理。当数据分析......
  • Flask 框架:运用Echarts绘制图形
    echarts是百度推出的一款开源的基于JavaScript的可视化图表库,该开发库目前发展非常不错,且支持各类图形的绘制可定制程度高,Echarts绘图库同样可以与Flask结合,前台使用echart......
  • Vue2 下 Echarts的使用
    Vue2下Echarts的使用1、安装组件npminstallechartsvue-echarts--save2、使用2.1、配置为全局组件方式全局配置为公有组件//main.jsimport"echarts"import......
  • 【ECharts学习】—实现中国地图
    【ECharts学习】—实现中国地图使用Echarts进行地图绘制展示的时候,需要china.js的引入,我把它放在百度网盘里了,需要的自取​​点我跳转到百度网盘​​提取码:clby<!DOCTYPE......