vue中如何使用echarts和echarts-gl实现三维折线图和三维柱状图

已于 2024-07-02 15:55:06 修改
阅读量439 收藏 5
点赞数 1
文章标签： javascript 开发语言 ecmascript
于 2024-06-28 15:09:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/askuld/article/details/140043876
版权

 一、vue中使用三维折线图

效果图：

二、使用步骤 

1.引入库

安装echarts

在package.json文件中添加

 "dependencies": {
 	"echarts": "^5.1.2"
 	"echarts-gl": "^1.1.1",
 	//  "echarts-gl": "^2.0.8"
 },

npm install echarts-gl@1.1.1 --save

2.使用

完整代码如下（示例）：

HTML代码
<template>
    <div :class="className" :style="{height:height,width:width}" />
</template>
js脚本代码
<script>
    import echarts from 'echarts'
    import "echarts-gl";
    require('echarts/theme/macarons') // echarts theme
    import resize from '@/views/dashboard/mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '400px'
            },
            dataList: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                chart: null,
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        watch: {
            dataList(val, oldVal) {//普通的watch监听
                this.initChart()
            }
        },
        methods: {
            initChart() {


                let data = [
                    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [0, 0, 1, 1, 5, 7, 9, 11, 12, 13, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17],
                    [5, 6, 9, 9, 9, 11, 11, 11, 13, 13, 14, 14, 14, 16, 16, 16, 16, 16, 18, 18, 18, 18],
                    [13, 17, 22, 22, 26, 33, 34, 36, 36, 37, 39, 40, 40, 42, 42, 42, 43, 43, 44, 44, 44, 44],
                    [13, 16, 17, 27, 35, 45, 49, 53, 58, 61, 65, 66, 68, 69, 71, 73, 73, 73, 74, 74, 74, 74]
                ]
                let dataX = ['1/27', '1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8', '2/9', '2/10', '2/11', '2/12', '2/13', '2/14', '2/15', '2/16', '2/17']
                let dataY = ['生产', '收购', '运输', '销售', '消费']
                var vdata = []
                for (var i = 0; i < dataY.length; i++) {
                    vdata[i] = []
                }
                for (var t = 0; t < dataY.length; t++) {
                    var y = dataY[t];
                    for (var k = 0; k < data[0].length; k++) {
                        for (var p = 0; p < dataX.length; p++) {
                            var x = dataX[p];
                            var z = data[t][p];
                            vdata[t].push([x, y, z]);
                        }
                        break;
                    }
                }
                this.chart = echarts.init(this.$el, 'macarons')
                this.chart.setOption(
                    {
                        xAxis3D: {
                            type: 'category',
                            name: '',
                            data: dataX,
                            axisLabel: {
                                show: true,
                                interval: 0  //使x轴都显示
                            }
                        },
                        yAxis3D: {
                            type: 'category',
                            name: '',
                            data: dataY,
                            axisLabel: {
                                show: true,
                                interval: 0   //使y轴都显示
                            }
                        },
                        zAxis3D: {
                            type: 'value',
                            name: ''
                        },
                        //图例
                        legend: {
                            orient: 'vertical',
                            right: 50,
                            top: 200,
                            icon: 'roundRect',
                            textStyle: {
                                color: '#FFFFFF'
                            }
                        },
                        tooltip: {
                            show: true
                        },
                        grid3D: {
                            boxWidth: 300,
                            boxHeight: 120,
                            boxDepth: 200,
                            axisLine: {
                                show: true,
                                interval: 0,
                                lineStyle: {
                                    color: '#FFFFFF'
                                }
                            },
                            viewControl: {
                                distance: 400
                            }
                        },
                        series: [
                            {
                                type: 'scatter3D',
                                name: '生产',
                                itemStyle: {
                                    color: 'rgb(165,  0, 38)'
                                },
                                label: {  //当type为scatter3D时有label出现
                                    show: true,
                                    position: 'top',   //标签的位置，也就是data中数据相对于线在哪个位置
                                    distance: 0,
                                    textStyle: {
                                        color: '#FFFFFF',
                                        fontSize: 12,
                                        borderWidth: 0,
                                        borderColor: '#FFFFFF',
                                        backgroundColor: 'transparent'
                                    }
                                },
                                data: vdata[0]
                            },
                            {
                                type: 'scatter3D',
                                name: '收购',
                                itemStyle: {
                                    color: 'rgb(215, 48, 39)'
                                },
                                label: {
                                    show: true,
                                    position: 'bottom',
                                    distance: 0,
                                    textStyle: {
                                        color: '#FFFFFF',
                                        fontSize: 12,
                                        borderWidth: 0,
                                        borderColor: '#FFFFFF',
                                        backgroundColor: 'transparent'
                                    }
                                },
                                data: vdata[1]
                            },
                            {
                                type: 'scatter3D',
                                name: '运输',
                                itemStyle: {
                                    color: 'rgb(254,224,144)'
                                },
                                label: {
                                    show: true,
                                    position: 'bottom',
                                    distance: 0,
                                    textStyle: {
                                        color: '#FFFFFF',
                                        fontSize: 12,
                                        borderWidth: 0,
                                        borderColor: '#FFFFFF',
                                        backgroundColor: 'transparent'
                                    }
                                },
                                data: vdata[2]
                            },
                            {
                                type: 'scatter3D',
                                name: '销售',
                                itemStyle: {
                                    color: 'rgb(255,255,191)'
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    distance: 0,
                                    textStyle: {
                                        color: '#FFFFFF',
                                        fontSize: 12,
                                        borderWidth: 0,
                                        borderColor: '#FFFFFF',
                                        backgroundColor: 'transparent'
                                    }
                                },
                                data: vdata[3]
                            },
                            {
                                type: 'scatter3D',
                                name: '消费',
                                itemStyle: {
                                    color: 'rgb(224,243,248)'
                                },
                                label: {
                                    show: true,
                                    position: 'bottom',
                                    distance: 0,
                                    textStyle: {
                                        color: '#FFFFFF',
                                        fontSize: 12,
                                        borderWidth: 0,
                                        borderColor: '#FFFFFF',
                                        backgroundColor: 'transparent'
                                    }
                                },
                                data: vdata[4]
                            },
                            {
                                type: 'line3D', //当type为line3D时有label没有作用，官网没有label这个配置项
                                name: '生产',
                                lineStyle: {
                                    width: 8,   //线的宽度
                                    color: 'rgb(165,  0, 38)'   //线的颜色
                                },
                                data: vdata[0]   //线数据和点数据所需要的格式一样
                            },
                            {
                                type: 'line3D',
                                name: '收购',
                                lineStyle: {
                                    color: 'rgb(215, 48, 39)',  //线的颜色
                                    width: 8     //线的宽度
                                },
                                data: vdata[1]
                            },
                            {
                                type: 'line3D',
                                name: '运输',
                                lineStyle: {
                                    color: 'rgb(254,224,144)',
                                    width: 8
                                },
                                data: vdata[2]
                            },
                            {
                                type: 'line3D',
                                name: '销售',
                                lineStyle: {
                                    color: 'rgb(255,255,191)',
                                    width: 8
                                },
                                data: vdata[3]
                            },
                            {
                                type: 'line3D',
                                name: '消费',
                                lineStyle: {
                                    color: 'rgb(224,243,248)',
                                    width: 8
                                },
                                data: vdata[4]
                            },
                        ]
                    }
                )
            }
        }
    }
</script>

三、vue中使用三维柱状图

效果图

完整代码

<template>
    <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
    import echarts from 'echarts'
    import "echarts-gl";
    require('echarts/theme/macarons') // echarts theme
    import resize from '@/views/dashboard/mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '400px'
            },
            dataList: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                chart: null,
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        watch: {
            dataList(val, oldVal) {//普通的watch监听
                this.initChart()
            }
        },
        methods: {
            initChart() {


                let data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];

                let dataX = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
                    '7a', '8a', '9a', '10a', '11a',
                    '12p', '1p', '2p', '3p', '4p', '5p',
                    '6p', '7p', '8p', '9p', '10p', '11p'];
                let dataY = ['Saturday', 'Friday', 'Thursday',
                    'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

                this.chart = echarts.init(this.$el, 'macarons')
                this.chart.setOption(
                    {
                        tooltip: {},
                        visualMap: {
                            max: 20,
                            inRange: {
                                color: [
                                    '#313695',
                                    '#4575b4',
                                    '#74add1',
                                    '#abd9e9',
                                    '#e0f3f8',
                                    '#ffffbf',
                                    '#fee090',
                                    '#fdae61',
                                    '#f46d43',
                                    '#d73027',
                                    '#a50026'
                                ]
                            }
                        },
                        xAxis3D: {
                            type: 'category',
                            data: dataX
                        },
                        yAxis3D: {
                            type: 'category',
                            data: dataY
                        },
                        zAxis3D: {
                            type: 'value'
                        },
                        grid3D: {
                            boxWidth: 200,
                            boxDepth: 80,
                            viewControl: {
                                // projection: 'orthographic'
                            },
                            light: {
                                main: {
                                    intensity: 1.2,
                                    shadow: true
                                },
                                ambient: {
                                    intensity: 0.3
                                }
                            }
                        },
                        series: [
                            {
                                type: 'bar3D',
                                data: data.map(function (item) {
                                    return {
                                        value: [item[1], item[0], item[2]]
                                    };
                                }),
                                shading: 'lambert',
                                label: {
                                    fontSize: 16,
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                        fontSize: 20,
                                        color: '#900'
                                    },
                                    itemStyle: {
                                        color: '#900'
                                    }
                                }
                            }
                        ]
                    }
                )
            }
        }
    }
</script>

Best_Liu~
关注
PyEcharts 3D图表之 3D 折线图
m0_62222486的博客
06-24 194
为了完成本关任务，你需要掌握：1. Python 的基本语法，2. PyEcharts 3D 柱状图的相关内容。为了完成本关任务，你需要掌握：1. Python 的基本语法，2. PyEcharts 3D 折线图的相关内容。视觉映射组件最大值设置为 30，最小值设为 0 ，维度设为 2，颜色过度序列见文末。坐标系组件的宽度和深度都设置为 100，开启旋转，自转速度设置为 150。视觉映射组件最大值设置为 30，最小值设置为 0，组件过渡颜色设置为。平台会运行你编写的代码进行绘图，并展示其效果。
Vue+Echarts柱状折线图
Summer_JK的博客
10-13 774
vue处理json数据渲染柱状折线图 HTML： <div id="lineCharts" style="width: 100%; height: 500px; margin-top: 20px"></div> JS： drawLineCharts() { let data = {sid: "02fertdfg0221",choose: 1,}; //这里是接口的传参 axios .request({
01-echarts如何绘制三维折线图
jiuliangliang的博客
01-24 2057
echarts、三维折线图
ECharts-GL 深度指南
最新发布
gitblog_00650的博客
08-09 1137
ECharts-GL 深度指南 echarts-glExtension pack for Apache ECharts, providing globe visualization and 3D plots.项目地址:https://gitcode.com/gh_mirrors/ec/echarts-gl 项目介绍 ECharts-GL 是 Apache ECharts 的扩展包，专门用于提供地...
vue 使用echarts-gl实现3d旋转地图
YL
01-29 1891
之前也有使用过echarts开发项目中涉及到的地图功能，当时使用geo来实现地图轮廓，看上去有种3d的感觉。首先安装下echarts和echarts-gl依赖，在这里注意的点是，echarts-gl版本可以安装低版本，默认安装的依赖版本运行后一直报错。，这也是实现3d地图的主要属性，针对geo3d中每个属性的功能大家可以在echarts文档进行查阅，这里我就不一一细说了。这里我截图展示的，需要看地图动效的，大家可以在本地运行看下地图自动旋转效果。接下来我们看下完整的代码。安装好依赖，在页面引入。
echarts 3D折线图应用
zt60112的博客
07-13 6467
废话不多说，先上效果图 公司最近做一个振动项目，需要展示振动曲线，考虑其直观性，决定用3D折线图来做。 首先你要引入echarts的相关js，下图为我引入的例子，其中GL那个js是echarts控制3D的，你可根据自己需要去echarts官方网站上下载这俩js <script src="${ctxStatic}/plugin/echarts4/echarts.min.js"></script> <script src="${ctxStatic}/plugin/echarts4/
可视化例子(11)——ECharts line3D制作三维折线图
Ocean111best的博客
02-25 9949
因工作需要，制作了三维折线图，可以看到三个变量的变化。其效果如下图所示： 其中遇到了一个很大的问题，line3D 无法出现标签（查看了所有配置项，均没有该配置，这应该是 ECharts 的一个 bug），即如图所示中数值无法出现。后来想到的解决办法是再画个散点图（scatter3D），因 3D 散点图可以出现标签。3D 折线图套上散点图，就如同折线图上面可以出现标签了。 <!doc...
vue echarts 三维折线图
qq_51313111的博客
07-17 2612
<template> <div id="main" style="width: 900px;height: 600px"></div> </template> <script> import * as echarts from 'echarts'; import 'echarts-gl' export default { name: "hello", mounted() { this.drewLine() }, met
vue+echarts 绘制折线图、柱状图和扇形图
JeffreytheCoder的博客
08-29 6472
前端时间在前端岗位上要实现Vue项目中的echarts画图，今天来分享下vue+echarts折线图、柱状图和扇形图的方法。每种图的echarts配置差不多一致，但根据图种需进行指定选项的改动。 一、折线图 折线图中，series要包含每条折线的数据。 <template> <div id="myChart"></div> </template> <script> import echarts from 'echarts' // 引入ec
在vue中使用echarts(折线图的demo,markline用法)
10-15
通过以上步骤，你已经在Vue中成功实现了ECharts折线图并添加了markline功能。你可以根据项目需求调整配置，以展示不同类型的图表和自定义标记线。记得在实际项目中根据实际情况调整样式和数据源，以满足实际需求。
在Vue中使用Echarts实例图的方法实例
10-14
在Vue中使用Echarts涉及到几个关键步骤，包括安装Echarts、在组件中引入Echarts、创建Echarts图表容器、配置图表参数以及在合适的生命周期中挂载图表。 首先，需要在Vue项目中安装Echarts。可以通过npm或者yarn来...
echarts-gl
12-14
百度官网给出的echarts版本与echarts-gl版本不匹配,这里给出历史版本下载
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
源码：el-table和Echarts折线图【表-图两者联动】显示tooltip效果【表-图-表三者联动】展示数据
03-17
【Vue入门实践4】el-table和Echarts折线图【表-图两者联动】显示tooltip效果【表-图-表三者联动】展示数据 资源相关文章https://mp.csdn.net/mp_blog/creation/editor/123230346
echarts+echarts-gl实现带有散点、路径的3d地球
07-22
该资源主要是使用echarts+echarts-gl实现带有散点、路径的3d地球的简单示例代码 效果可见本人的一篇文章 https://blog.csdn.net/weixin_45669156/article/details/125932601?spm=1001.2014.3001.5502 文章提到的...
vue中使用echarts与echarts-gl 实现3D饼图环形饼图
热门推荐
weixin_47336389的博客
12-29 1万+
vue脚手架中安装echarts与echarts-gl，在vue页面中引入使用，实现3d饼图 环形图，移动上去有效果的那种
Echarts折线图曲线图和三维图
qq_36982349的博客
03-04 7297
1 折线图 鼠标放在点上时显示的数据效果，在代码中用到的就是tooltip这个参数，其中show的默认值是true，可以省略，当我们不想显示悬浮提示效果，将show修改为false。trigger设置这个参数，效果是可以看到一个竖直的虚线，不添加则不显示。backgroundColor效果是显示数据的弹窗对应的背景色，需要什么颜色自行设置。extraCssText可以设置弹窗显示的阴影效果。 配置项的全部代码 options: {    title:&n
vue 项目中的echarts的使用
一人一城温一壶酒的博客
04-23 970
目录 echarts官网：https://echarts.apache.org/zh/index.html 2D可视化图标 3D可视化绘图 目前做的一个项目需要用echarts做可视化图标，之前没有接触过这一块， 今天在学习的过程中顺便记录一下，以备不时之需 echarts官网：https://echarts.apache.org/zh/index.html 本文介绍的是在@vue/cli 4.4.6版本下建的vue项目中使用Echarts, 通过 npm 获取 echarts， np.
263Echarts - 3D 折线图（三维折线图正交投影）
阿甘兄
05-06 7788
效果图 源代码 var data = []; // Parametric curve for (var t = 0; t < 25; t += 0.001) { var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t); var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t); ...
vue3中用echarts和echarts-gl 实现一个3D的饼状图
05-12
在Vue3中使用ECharts和ECharts-GL来实现3D饼状图的步骤如下： 1. 安装依赖 ``` npm install echarts echarts-gl --save ``` 2. 引入ECharts和ECharts-GL 在Vue组件中引入ECharts和ECharts-GL： ```javascript import echarts from 'echarts' import 'echarts-gl' ``` 3. 准备数据 在Vue组件中准备数据，例如： ```javascript data() { return { chartData: [ { value: 335, name: 'Chrome' }, { value: 310, name: 'Firefox' }, { value: 234, name: 'Safari' }, { value: 135, name: 'IE' }, { value: 1548, name: '其他' } ] } } ``` 4. 创建ECharts实例 在Vue组件中创建ECharts实例： ```javascript mounted() { const chartDom = this.$refs.chart const myChart = echarts.init(chartDom, null, { renderer: 'canvas' }) ``` 这里指定了渲染器为canvas，因为ECharts-GL需要使用WebGL渲染器，而默认的渲染器为canvas。 5. 配置ECharts选项 在Vue组件中配置ECharts选项，包括饼状图的类型、数据、标签等： ```javascript const option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [ { type: 'pie', radius: [20, 80], label: { show: true, formatter: '{b}:{d}%' }, data: this.chartData } ] } ``` 这里指定了饼状图的类型为pie，半径范围为[20, 80]，显示标签，并使用之前准备的数据。 6. 使用ECharts-GL 在Vue组件中使用ECharts-GL来将饼状图转换为3D饼状图： ```javascript myChart.setOption(option) myChart.getZr().painter.configLayer(0, { clearColor: null, clearDepth: 0, motionBlur: true, lastFrameIndex: -1 }) myChart.setOption({ series: [ { type: 'pie3D', shading: 'lambert', label: { show: true, formatter: '{b}:{d}%' }, data: this.chartData } ] }) ``` 这里使用`setOption`方法来设置饼状图的选项，并使用`getZr()`方法获取渲染器实例，然后使用`configLayer`方法来设置WebGL渲染器的配置。最后使用`setOption`方法将饼状图转换为3D饼状图。 7. 渲染图表 在Vue组件中渲染图表： ```html <template> <div ref="chart" style="width: 100%; height: 500px;"></div> </template> ``` 这里使用`ref`属性来获取DOM元素，并设置宽度和高度。 完整代码如下： ```javascript <template> <div ref="chart" style="width: 100%; height: 500px;"></div> </template> <script> import echarts from 'echarts' import 'echarts-gl' export default { data() { return { chartData: [ { value: 335, name: 'Chrome' }, { value: 310, name: 'Firefox' }, { value: 234, name: 'Safari' }, { value: 135, name: 'IE' }, { value: 1548, name: '其他' } ] } }, mounted() { const chartDom = this.$refs.chart const myChart = echarts.init(chartDom, null, { renderer: 'canvas' }) const option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [ { type: 'pie', radius: [20, 80], label: { show: true, formatter: '{b}:{d}%' }, data: this.chartData } ] } myChart.setOption(option) myChart.getZr().painter.configLayer(0, { clearColor: null, clearDepth: 0, motionBlur: true, lastFrameIndex: -1 }) myChart.setOption({ series: [ { type: 'pie3D', shading: 'lambert', label: { show: true, formatter: '{b}:{d}%' }, data: this.chartData } ] }) } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值