zoukankan      html  css  js  c++  java
  • echarts散点图例子scatter-weight折腾记之echarts参数修改

    上一篇折腾记地址:https://www.cnblogs.com/qtx-/p/11606541.html

    1、修改echarts的markline为虚线;

    2、去掉echarts的markline的箭头;

    以下代码可实现:

                markLine : {
                    symbol:'none',
                    lineStyle: {
                        normal: {
                            type: 'dashed'
                        }
                    },
                    label:{
                        formatter:'采购价格红线值{c}',
                        position:'middle'
                    },
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }

    完整配置如下:

    option = {
        dataset:{
            source:[[61.2,51.6,74,"北京分"],[67.5,59,75.3,"广州分"],[59.5,49.2,9305,"浙江分"],[57,63,8605,"石家庄分"],[55.8,53.6,87.2,"黑龙江分"],[70,59,8105,"河南分"],[59.1,47.6,84,"福建分"],[66,69.8,8405,"陕西分"],[76.2,66.8,75,"内蒙古分"],[76.2,null,75,"内蒙古分001"],[null,66.8,75,"内蒙古分002"],[76.2,66.8,null,"内蒙古分003"],[76.2,null,75,"内蒙古分004"]],
            dimensions:['采购价格','销售价格','销量','分公司名称']
        },
        title : {
            text: '男性女性身高体重分布',
            subtext: '抽样调查来自: Heinz  2003'
        },
        grid: [{
                left: '3%',
                top: '0%',
                 '97%',
                height: '30%',
                containLabel: true
            },{
                left: '3%',
                top: '34%',
                 '97%',
                height: '30%',
                containLabel: true
            },{
                left: '3%',
                top: '69%',
                 '97%',
                height: '30%',
                containLabel: true
            }
        ],
        tooltip : {
            // trigger: 'axis',
            showDelay : 0,
            axisPointer:{
                show: true,
                type : 'cross',
                lineStyle: {
                    type : 'dashed',
                    width : 1
                }
            }
        },
        toolbox: {
            feature: {
                dataZoom: {},
                 {
                    type: ['rect', 'polygon', 'clear']
                }
            }
        },
         {
        },
        legend: {
            data: ['女性','男性'],
            left: 'center'
        },
        xAxis : [
            {
                gridIndex: 0,
                type : 'category',
                scale:true,
                axisLabel : {
                    formatter: '{value}'
                },
                axisLine:{
                    symbol:['none','arrow']  
                },
                splitLine: {
                    show: false
                }
            },
            {
                gridIndex: 1,
                type : 'category',
                scale:true,
                axisLabel : {
                    formatter: '{value}'
                },
                splitLine: {
                    show: false
                }
            },
            {
                gridIndex: 2,
                type : 'category',
                scale:true,
                axisLabel : {
                    formatter: '{value}'
                },
                splitLine: {
                    show: false
                }
            }
        ],
        yAxis : [
            {
                gridIndex: 0,
                type : 'value',
                scale:true,
                splitLine: {
                    show: false
                }
            },
            {
                gridIndex: 1,
                type : 'value',
                scale:true,
                splitLine: {
                    show: false
                }
            },
            {
                gridIndex: 2,
                type : 'value',
                scale:true,
                splitLine: {
                    show: false
                }
            }
        ],
        series : [
            {
                name:'采购价格',
                xAxisIndex: 0,
                yAxisIndex: 0,
                type:'scatter',
                encode: {
                    x:3,
                    y:0,
                    tooltip: [0, 1, 2]
                },
                markLine : {
                    symbol:'none',
                    lineStyle: {
                        normal: {
                            type: 'dashed'
                        }
                    },
                    label:{
                        formatter:'采购价格红线值{c}',
                        position:'middle'
                    },
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'销售价格',
                xAxisIndex: 1,
                yAxisIndex: 1,
                type:'scatter',
                encode: {
                    x:3,
                    y:1,
                    tooltip: [0, 1, 2]
                },
                markLine : {
                    lineStyle: {
                        normal: {
                            type: 'solid'
                        }
                    },
                    label:{
                        formatter:'销售价格红线值{c}',
                        position:'middle'
                    },
                    data : [
                            {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                encode: {
                    x: 3,
                    y: 2,
                    tooltip: [0, 1, 2, 3]
                }
            }
        ]
    };
  • 相关阅读:
    堆排序算法的原理和实现
    图的深度优先搜索(DFS)和广度优先搜索(BFS)算法
    图的迪杰斯特拉算法求最短路径
    第13章 切换到混合流并添加API访问
    第12章 添加对外部认证的支持
    第11章 使用OpenID Connect添加用户身份验证
    第10章 使用密码保护API
    第9章 使用客户端凭据保护API
    第8章 概述
    第7章 贡献
  • 原文地址:https://www.cnblogs.com/qtx-/p/11606541.html
Copyright © 2011-2022 走看看