圆头柱状图

最新推荐文章于 2024-01-13 22:11:26 发布
最新推荐文章于 2024-01-13 22:11:26 发布
阅读量325 收藏
点赞数
分类专栏： echarts 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42120669/article/details/122661832
版权

 

 

option = {
    backgroundColor: '#0c1e55', //背景颜色
    title: {
        text: '测温',
        x: 'center',
        top: "20",
        textStyle: {
            //文字颜色
            color: '#ffff',
            //字体风格
            fontStyle: 'normal',
            //字体粗细 
            fontWeight: 'bold',
            //字体系列
            fontFamily: 'sans-serif',
            //字体大小
            fontSize: 18

        },
    },
    color: ['#00feff', '#4693EC'],
    legend: {
        data: ["累计热量", "环比"],
        // "bottom": 5,
        top: "10%",
        icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
        // triangle三角形  emptyDiamond 空心菱形
        //emptyCircle 空心圆型 emptyRectangle 空心长方形 emptyTriangle 空心三角形
        textStyle: {
            // color: "#fff", //自定义颜色
            color: [], //给随颜色
        },
        color: ['#00feff', '#4693EC']
    },
    tooltip: {
        trigger: 'item',
        formatter: function(parms) {
            var str = parms.seriesName + "</br>" +
                parms.marker + "" + parms.data.name + "</br>" +
                "当前温度：" + parms.data.value + "</br>" +
                "目标温度：" + parms.data.value1 + "</br>"
            // +
            // "占比：" + parms.percent + "%";
            return str;
        },

    },
    grid: {
        left: '3%', //整个曲线居左的距离
        right: '4%', //整个曲线居右左的距离
        bottom: '10%', //整个曲线居下左的距离
        height: '70%', //整个曲线的高
        containLabel: true
    },
    // dataZoom: [{
    //     type: 'slider',
    //     realtime: true,
    //     //拖拉
    //     handleSize: '100%', //滑动条两侧的大小
    //     start: 0, //开始位置
    //     end: 50, //结束位置
    //     bottom: 25, //居下的距离
    //     textStyle: {
    //         color: '#1bb4f6' // 滑动条的文字颜色
    //     },
    // }],
    xAxis: [{
            type: 'category',
            axisTick: {
                show: false,
                color: '#707070'
            },

            axisLabel: {
                textStyle: {
                    fontSize: 14,
                    color: '#FFFF'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#00FF00'
                }
            },
            data: ['测温1', '测温2', '测温3'],
        },

    ],
    yAxis: [{
        type: 'value',
        name: '测温',
        nameTextStyle: {
            fontSize: 14, //文字大小
            color: '#ebf8ac' //文字颜色
        },
        axisLine: {
            lineStyle: {
                color: '#FFFF', //设置Y轴的颜色
                width: 1.5, //设置Y轴的粗细
            }
        },
        axisLabel: {
            show: true,
            // formatter: "{value} %", //左侧单位添加后缀
            textStyle: {

                color: '#00FF00' //Y轴的数据字体颜色
            },
        },
        splitLine: {
            show: true, //网格线显示
            lineStyle: {
                color: '#FFC125' //网格线的颜色
            }
        },

    }, ],
    series: [

        {
            name: '累计热量',
            type: 'bar',
            barWidth: '20%', //柱状图宽度
            data: [{
                    name: '测温1',
                    value: '70',
                    value1: '20',
                    itemStyle: {
                        normal: {
                            color: '#1F78B4',
                            barBorderRadius: [50, 50, 0, 0] //柱状图圆角
                        }
                    },
                    label: {
                        show: true, //是否显示
                        position: 'top', //位置
                        distance: 15, //高度
                        // 			color: '#DB5E6A', //颜色
                        fontWeight: 'bolder', //加粗
                        fontSize: 20, //字体大小
                    },

                },
                {
                    name: '测温2',
                    value: '60',
                    value1: '40',
                    itemStyle: {
                        color: '#A6CEE3'
                    },
                    label: {
                        show: true, //是否显示
                        // position: 'top', //位置
                        // distance: 15, //高度
                        // 			color: '#DB5E6A', //颜色
                        // fontWeight: 'bolder', //加粗
                        // fontSize: 20, //字体大小
                    },
                },
                {
                    name: '测温3',
                    value: '20',
                    value1: '70',
                    itemStyle: {
                        color: '#B2DF8A'
                    },
                    label: {
                        show: true, //是否显示
                        position: 'top', //位置
                        distance: 15, //高度
                        // 			color: '#DB5E6A', //颜色
                        fontWeight: 'bolder', //加粗
                        fontSize: 20, //字体大小
                    },
                }
            ]
        },
        {
            name: '环比',
            type: 'bar',
            barWidth: '20%', //柱状图宽度
            data: [{
                    name: '测温1',
                    value: '50',
                    value1: '10',
                    itemStyle: {
                        normal: {
                            color: '#1F78B4',
                            barBorderRadius: [50, 50, 0, 0] //柱状图圆角
                        }
                    },
                    label: {
                        show: true, //是否显示
                        position: 'top', //位置
                        distance: 15, //高度
                        // 			color: '#DB5E6A', //颜色
                        fontWeight: 'bolder', //加粗
                        fontSize: 20, //字体大小
                    },

                },
                {
                    name: '测温2',
                    value: '80',
                    value1: '60',
                    itemStyle: {
                        color: '#A6CEE3'
                    },
                    label: {
                        show: true, //是否显示
                        // position: 'top', //位置
                        distance: 15, //高度
                        // 			color: '#DB5E6A', //颜色
                        fontWeight: 'bolder', //加粗
                        fontSize: 20, //字体大小
                    },
                },
                {
                    name: '测温3',
                    value: '30',
                    value1: '50',
                    itemStyle: {
                        color: '#B2DF8A'
                    },
                    label: {
                        show: true, //是否显示
                        position: 'top', //位置
                        distance: 15, //高度
                        // 			color: '#DB5E6A', //颜色
                        fontWeight: 'bolder', //加粗
                        fontSize: 20, //字体大小
                    },
                },
            ]
        },

    ]
};

花归去
关注
专栏目录
总结整理Echarts双y轴曲线图（全）
柠檬
01-05 7333
        最近因为项目需要，用到了Echarts，自己学习了相关东西，也参考了一些文件，最终把双y轴曲线图实现了，跟大家分享一下。下面是最终需要的效果图： 不多说了，直接上代码！O(∩_∩)O哈哈~ --------------------------------------------------------------     HTML部分    ----------------...
origin如何绘制双y轴曲线_Origin作图教程 | 热重曲线如何分析与作图？
weixin_35117981的博客
01-09 3954
在本系列内容中第29~32部分中分别介绍了在仪器附带软件中对实验得到的TG数据的导入、基本作图、数学处理、特征量确定等方法，然而在实验应用中，通常仪器附带的数据分析软件差别较大，且大多数不相兼容。另外，不同的软件之间的功能差别较大，经常会出现在作图和数据处理时无法满足相关需求的现象。因此，在撰写科研论文或者报告时，往往需要在通用的专业的数据分析软件中对数据进行进一步的处理和对比。在本部分...
自定义圆头柱状图
8y_lionking的博客
07-13 668
自己的项目碰到需要自定义圆头柱状图，记录下来 public abstract class BaseCoordinateView extends View { public static final String TAG = "MChartView"; private RectF mRealRect0; private RectF mRealRect1;
纵向渐变柱状图
梦寻汝的博客
01-21 315
datatime=["04-01", "04-02", "04-04"] datadata= [1200, 1500, 2000] option={ tooltip: { "trigger": "axis", // "axisPointer": { // "type": "cross", // "crossStyle": { // "color": "#999" //...
MatLab 绘制双Y轴曲线
最新发布
quixotic的博客
01-13 1315
用于论文中对权重因子变量进行实验，（如：a + beta*b )，x 轴为 beta，y 轴为 a 和 b。
【科研绘图Origin】制作一个双Y轴曲线图
乾巽的博客
08-10 4万+
制作双Y轴曲线图最终效果图1.导入数据2.设置上轴3.设置右轴4.将曲线对应两个图层5.修改图例6.美化坐标轴曲线最终结果 最终效果图 1.导入数据 初始图 2.设置上轴 双击下轴，设置如下，可显示无刻度的上轴 3.设置右轴 接着设置有刻度的右轴 这时产生了第二个图层 当前效果： 4.将曲线对应两个图层 现在想要将原始曲线中，值较大的曲线对应左轴，值小的对应右轴 找到左上角的图层小图标，点击2️⃣，选择【图层内容】 选择对应曲线添加 这时后图层2里面就包含这两条曲线了。 但是，因为图层1包含
如何使用MatPlotLib绘制出具有两个 Y 轴的曲线图？
TSINGHUAJOKING
02-04 4159
简 介： 本文给出了利用Matplotlib中的 twinx() 完成同一个图表中绘制具有两个 Y-轴的曲线。绘制每一个曲线的方法与普通的Plot没有什么两样。 关键词： matplotlib，双Y轴 #mermaid-svg-SsRJ7ZfWKpMLrQEB .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-sv..
【2000叔叔的自定义View】之【SimplePillarsView】可多色可圆角柱状图【demo】
06-18
详细中午API在doc.zip里，去我的博客查看最新的更新和更多的demo。
echarts 实现柱状图bar顶部圆角显示
gdgztt的专栏
12-21 1626
echarts 实现柱状图bar顶部圆角显示
echarts横向柱状图一端圆形配置
九亿宅男的梦的博客
05-16 1130
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, color: ['#959595'], grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, ...
Echarts学习记录——调整柱状图圆角弧度
flygoa的专栏
10-25 5万+
Echarts学习记录——调整柱状图圆角弧度 关键属性 series.itemStyle:图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式） 其中的barBorderRadius属性
Matplotlib 双Y轴曲线
会飞的狼
08-23 2549
双y轴图像具有单y轴图像没有的对比效果，在MATLAB中有plotyy函数可以实现，Python的实现方式没有MATLAB那样方便，不过实现效果却也不见得差。以往我常用的绘图命令是 import matplotlib.pylab as plt # 导入绘图包 plt.figure() # 创建图像文件 plt.plot(…) # 绘制图像 plt.show() # 显示图像在双y轴制图中，
python matplotlib 绘制双Y轴曲线图
热门推荐
Avalon
06-06 9万+
要点就是ax2 = ax1.twinx()， 制作一个兄弟轴。代码如下：import matplotlib.pyplot as plt import numpy as npx = np.arange(0., np.e, 0.01) y1 = np.exp(-x) y2 = np.log(x)fig = plt.figure()ax1 = fig.add_subplot(111) ax1.plot(x
python绘制双Y轴时间序列数据曲线图
henbile的博客
03-09 5984
花了一天摸索出来的，在python上面画双Y轴的时间序列数据的曲线图。网上大多数绘制双Y轴曲线图的不是时间序列曲线图。我这里用到两个包，pandas和matplotlib.pyplot包。画时间序列的时候，用pandas包的method，结合plt包使用，这个就需要我的数据以pd.Series或者pd.DataFrame形式保存。series 或者 dataframe 可能需要有日期作为index...
origin做双Y轴折线图的具体步骤
飘羽的博客
06-05 4万+
1.导入数据： file--&gt;Open excel 选择自己的数据集2.插入图表 ：plot--&gt;Line--&gt;Line，这是会弹出一个对话框：3.通过导入的数据进行建图，选择数据区域如图所示，然后点击X，表示X轴要呈现的数据。设置y轴的数据集也一样。如图所示；点击plot 便画出了单Y轴的折线图，如图所示：最重要的一步是添加另一个Y轴：操作步骤graph--&gt;New La...
vue3+ts 使用echarts 画圆柱状图
chonga_的博客
04-25 2221
效果图如下： 代码如下 <script lang="ts" setup> import { reactive, ref, toRefs, onMounted } from 'vue'; import * as echarts from 'echarts'; // 获取echarts的dom元素 let chartRef = ref(); // 定义收益柱状图数据 let profit = reactive({ title: { text: .
echarts 柱状图--圆角barBorderRadius不生效
打工人
07-06 9784
官方文档,上面的示例是可以的,但是搬到自己这来就不生效了, 经过尝试发现把borderRadius改为barBorderRadius然后就正常了。
EchartsBar 圆柱形渐变色柱状图
weixin_53003063的博客
09-14 442
需求：柱状渐变色，x轴不限制刻度轴，背景轴线虚线
echarts柱状图如何设置圆头
08-05
要设置 Echarts 柱状图的圆头，你可以使用 `barBorderRadius` 属性来实现。下面是一个示例代码： ```javascriptoption = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ data: [120,200,150,80,70], type: 'bar', barWidth: '30%', itemStyle: { barBorderRadius: [10,10,0,0] // 设置圆头 } }] }; ``` 在上面的代码中，我们通过设置 `itemStyle` 属性中的 `barBorderRadius` 来指定柱状图的圆角半径。数组中的四个值分别对应柱状图的左上角、右上角、右下角和左下角的圆角半径。通过调整这四个值，你可以实现不同形状的柱状图。 希望对你有帮助！如有更多问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花归去

客官赏点吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值