Echarts象形柱状+折线趋势图

已于 2024-06-27 09:06:19 修改
阅读量275 收藏
点赞数 2
文章标签： echarts 前端 javascript
于 2024-06-27 09:05:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41564885/article/details/140003644
版权

做项目优化的图表，直接放代码：

//注意引入Echarts
option = {
    backgroundColor: '#000',
    legend: {
        top: '20',
        x: 'center',
        textStyle: {
            fontSize: 16,
            color: 'rgba(101, 213, 255, 1)',
        },
        icon: 'path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z',
        itemWidth: 8, // 设置宽度
        itemHeight: 8, // 设置高度、
        itemGap: 12, // 设置间距
    },
    tooltip: {
        show: false,
        trigger: 'axis', //axis , item
        backgroundColor: 'RGBA(0, 49, 85, 1)',
        borderColor: 'rgba(0, 151, 251, 1)',
        borderWidth: 1,
        borderRadius: 0,
        textStyle: {
            color: '#BCE9FC',
            fontSize: 16,
            align: 'left',
        },
    },
    grid: {
        right: '5%',
        top: '5%',
        left: '5%',
        bottom: '5%',
        containLabel: true,
    },
    xAxis: {
        nameTextStyle: {
            color: '#65d5ff',
        },
        type: 'category',
        boundaryGap: true,
        data: ["1月" , "2月" , "3月" , "4月"],
        axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
                color: '#65D5FF',
                fontStyle: 'normal',
                fontSize: 20,
            },
        },
        axisTick: {
            //坐标轴刻度相关设置。
            show: false,
        },
        axisLine: {
            show: false,
            //坐标轴轴线相关设置
            lineStyle: {
                color: 'rgba(77, 128, 254, 0.2)',
            },
        },
        splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
                color: 'rgba(77, 128, 254, 0.2)',
            },
        },
    },
    dataZoom: [{
        type: 'slider',
        show: false,
        bottom: '20px',
        borderColor: '#07417a',
        backgroundColor: 'transparent',
        dataBackground: {
            lineStyle: {
                color: 'transparent',
                shadowOffsetY: 0,
            },
            areaStyle: {
                color: 'transparent',
                shadowOffsetY: 0,
            },
        },
        // 拖拽手柄样式 svg 路径
        handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
        handleColor: '#aab6c6',
        height: 6,
        handleSize: 12,
        showDataShadow: false,
        filterMode: 'filter',
        textStyle: {
            color: '#ccc',
        },
        start: 0,
        end: 100,
    }, ],
    yAxis: [
        {
            name: '个',
            nameTextStyle: {
                color: '#65d5ff',
            },
            type: 'value',
            splitNumber: 3,
            axisLabel: {
                textStyle: {
                    color: '#65D5FF',
                    fontStyle: 'normal',
                    fontSize: 16,
                },
            },
            axisLine: {
                show: true,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(77, 128, 254, 0.2)',
                },
            },
        },
        {
            name: '',
            nameTextStyle: {
                color: '#65d5ff'
            },
            min: 0,
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#233653'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#233653'
                }
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#78bdf5'
                },
                formatter: function (value) {
                    return value * 100 + '%'
                }
            },
            axisTick: {
                show: false
            }
        }
    ],
    series: [
        {
            name: '数据1',
            type: 'pictorialBar',
            barWidth: '50%',
            label: {
                normal: {
                    show: false,
                },
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0.5,
                                color: 'rgba(45,183,245, 0.8)', // 0% 处的颜色
                            },
                            {
                                color: 'rgba(0, 0, 0, 0.1)', // 100% 处的颜色
                                offset: 1,
                            },
                        ],
                        globalCoord: false, // 缺省为 false
                    }, //渐变颜色
                },
            },
            symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',

            data: [120,280,340,400],
        },
        {
            name: '数据2',
            type: 'pictorialBar',
            barWidth: '50%',
            label: {
                normal: {
                    show: false,
                },
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0.5,
                                color: 'rgba(48, 236, 166,0.8)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 34, 66, 0.2)', // 100% 处的颜色
                            },
                        ],
                        globalCoord: false, // 缺省为 false
                    }, //渐变颜色
                },
            },
            symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',

            data: [80,150,150,230],
        },
        {
            name: '数据3',
            type: 'pictorialBar',
            barWidth: '50%',
            label: {
                normal: {
                    show: false,
                },
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0.5,
                                color: 'rgba(255,151,121, 0.8)', // 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,192,121, 0.2)', // 100% 处的颜色
                            },
                        ],
                        globalCoord: false, // 缺省为 false
                    }, //渐变颜色
                },
            },
            symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
            data: [60,50,64,73],
        },
        {
            type: 'line', 
            smooth: true,
            symbol: 'none',
            lineStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(45,183,245, 0.8)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(45,183,245, 1)'
                    }, {
                        offset: 1,
                        color: 'rgba(45,183,245, 0.8)'
                    }]),
                    shadowColor: 'rgba(45,183,245,1)',
                    shadowBlur: 10
                }
            },
            data: [120,280,340,400],
            yAxisIndex: 1
        },
        {
            type: 'line',
            data: [80,150,150,230],
            smooth: true,
            symbol: 'none',
            lineStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(48, 236, 166, 0.8)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(48, 236, 166, 1)'
                    }, {
                        offset: 1,
                        color: 'rgba(48, 236, 166, 0.8)'
                    }]),
                    shadowColor: 'rgba(48, 236, 166,1)',
                    shadowBlur: 10
                }
            },
            yAxisIndex: 1
        },
        {
            type: 'line',
            data: [60,50,64,73],
            smooth: true,
            symbol: 'none',
            lineStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,192,121, 0.3)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(255,192,121, 1)'
                    }, {
                        offset: 1,
                        color: 'rgba(255,192,121, 0.3)'
                    }]),
                    shadowColor: 'rgba(255,192,121,1)',
                    shadowBlur: 10
                }
            },
            yAxisIndex: 1
        },
    ],
};

直接放在Echarts官方示例中可查看效果。
源自网站改进而来
在这里插入图片描述

Callback_heaven
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
eCharts 走势图
07-30
eCharts图标设计 。。制作走势图,这是本人整理出来，写了几个实例
echarts自定义柱状形状 带有上调下降趋势
JiAyInNnNnN123的博客
05-23 1907
1，自定义柱状图形状 处理方式：用echarts里的symbol series:[ { data: this.yData, type: 'pictorialBar', symbolRepeat: true, symbol: //图片base64位编码 这里省略 animationEasing: 'elasticOut', symbolSize: ['50%'.
echarts趋势线
原今兮的blog
07-17 2138
最近项目里需要绘制echarts图表的趋势线，查过资料后得知除了引入echarts之外还要引入ecStat.js辅助绘制，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="echarts.min.js"></script> <script src="ecStat
(完整)ECharts（趋势图（曲线版）带双滚轮）
qq_64200256的博客
03-22 918
非常简单C一下就可以用的
echarts仪表盘，柱状图，折线图，趋势图
pleaseprintf的博客
04-12 993
/解决页面刷新canvas画布变大 async loadEcharts(id) {var myChart = echarts . init(document . getElementById(id)) myChart . resize() // 精髓之所在 } ,提示：以下是本篇文章正文内容，下面案例可供参考。
echarts进阶--销售趋势图
weixin_45818290的博客
09-08 1128
echarts进阶阶段，我们需要拿到后端接口数据，然后生成图表，接着在调节样式效果图我们可以将图表的渲染分成三个阶段 初始化阶段、数据更新阶段、分辨率适配阶段。
echarts散点图加趋势线_Echart绘制趋势图和柱状图总结
weixin_39771351的博客
12-30 1606
1 var modalChart = null;23 functioncreateModalTrend(convertedData) {4 if(convertedData && convertedData[0] && convertedData[1] && convertedData[2]){5 //有数据情况下6 ...
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图
03-20
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图，数据驱动更新charts （备份的案例） 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PictorialBar
象形柱状图加渐变 加随机数.html
04-28
Echarts象形柱状图渐变色加随机数,下载后可直接看效果
echarts横向堆叠柱状图.zip
10-11
在数据分析和可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等。在本案例中，我们关注的是如何在 ECharts 中实现横向堆叠柱状图。首先，我们需要...
echarts 实现圆柱体图形.zip
05-14
在数据分析和可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等。在实际应用中，有时我们需要为图表添加更多的视觉效果，比如将普通的柱状图转化为...
echarts趋势折线图
bbt953的博客
12-28 1935
<template> <div ref="chart" class="trendChart"></div> </template> <script> import { getTrend, getAllTrend } from '@/request/publicSentiment' export default { name: 'trendChart', data () { return { trenddata:.
echart图片库_基于html5 Canvas图表库 : ECharts
weixin_39533307的博客
12-19 471
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。—— 大数据时代，重新定义数据图表的时候到了ArchitectureECharts (Enterprise Charts 商业产品...
【Echarts】折线图/趋势图区间框选计算
wan小小冰的博客
05-18 7735
针对折线图类的趋势图，以时间为横坐标，根据用户图形的区域框选可实时计算框选范围内的均值、总量或其他数据，具体实现代码如下：
vue+echarts项目四：地区销量趋势（堆叠折线图）
benlalagang的博客
09-24 1313
初始化图表+数据的获取+更新图表、尺寸变化的适配、标题显示以及对于数据的切换操作
【echarts】动态滚动趋势图，解决坐标轴数据太多遮挡覆盖问题
最新发布
DecorateCC的博客
02-01 975
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
Echarts中绘制多条趋势图，tootlip数据不会清除
m0_65943257的博客
10-13 224
由于项目中是点击树切换图表，所以图表 实例在每次重绘之后并不能销毁，所以在。加上 this.chart?.dispose();项目里封装了一个echarts组件，后端返回数据。
echarts折线和柱状图
08-25
Echarts提供了多种类型的图表模板，其中包括折线图和柱状图。折线图可以用来展示数据随时间变化的趋势，而柱状图可以用于比较不同类别之间的数据差异。对于折线图的配置，可以参考引用[1]中的折线图模板目录，其中包括了常见的折线图配置。对于柱状图的配置，可以参考引用中的柱状图模板目录。另外，引用和引用提供了一些关于echarts 3D柱状图和象形柱图的特定配置，包括隐藏坐标轴、网格线、留白、自定义矢量图等。所以，如果你想使用echarts来绘制折线图和柱状图，可以参考这些模板和配置来进行相应的设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [echarts 折线图 + 柱状图](https://blog.csdn.net/aibujin/article/details/124803493)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值