echarts之等腰三角形图表

最新推荐文章于 2024-05-10 11:47:36 发布

红色的苏里南苦樱桃

最新推荐文章于 2024-05-10 11:47:36 发布

阅读量780

点赞数

分类专栏： Echarts

本文链接：https://blog.csdn.net/weixin_44962808/article/details/104003649

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如下图所示：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>demo</title>
</head>
<body>
    <div id="oneCharts" style="width: 1000px;height: 500px;background-color: cadetblue;"></div>

    <script type="text/javascript" src="../lib/jquery.1.11.3.min.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script>
    // (function(){
        var oneCharts = echarts.init(document.getElementById('oneCharts'));
        var Option01 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                formatter: function (params) {
                    return params[0].name + ': ' + params[0].value;
                }
            },
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周末'],
                axisTick: {show: true},
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize:16,
                    },
                    margin:20,//刻度标签与轴线之间的距离
                    fontFamily:'Microsoft YaHei',//文字的字体
                },
                boundaryGap: true, //设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离
            },
            yAxis: {
                name: '个',
                nameTextStyle:{
                    color:'#dfdfe6',
                    fontSize:18,
                },
                splitLine: {
                    show: true,
                    lineStyle:{ //网格样式
                        color: ['#41466b'],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisTick: {show: true},
                axisLine: {show: true},
                axisLabel: {show: true},
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize:16,
                    },
                    margin:30,//刻度标签与轴线之间的距离
                    fontFamily:'Microsoft YaHei',//文字的字体
                },
                axisLine: { //改变坐标轴的颜色
                    lineStyle: {
                        color: '#484e78',
                        fontSize:16,
                        // width: 8, //这里是为了突出显示加上的
                    },
                    symbol: ['none', 'arrow'], //显示箭头
                    symbolSize: [5,12], //---箭头大小[高，宽]
                    symbolOffset: [0, 11],//轴线两边的箭头的偏移
                },
            },
            color: ['#307fd0'],
            series: [{
                name: 'hill',
                type: 'pictorialBar',
                //位置偏移,距离0刻度的位置
                barCategoryGap: '-75%',
                //图形宽度
                barWidth:100,
                //图形形状
                symbol: 'path://M150 50 L130 130 L170 130  Z',
                itemStyle: {
                    normal: {
                        opacity: 0.9
                    },
                    emphasis: {
                        opacity: 1,
                    }
                },
                data: [4,2,3,4,5,3,4],
                z: 10
            }, {
                name: 'glyph',
                type: 'pictorialBar',
                barGap: '-100%',
                symbolPosition: 'end',
                symbolSize: 50,
                symbolOffset: [0, '-120%']
            }]
        };
        oneCharts.setOption(Option01);
    // })()
    </script>
</body>
</html>

红色的苏里南苦樱桃

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts之等腰三角形图表

效果如下图所示：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录