New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lines 线图,多点折线 (polyline:true ) symbol 方向问题 #4060

Closed
archerbj opened this Issue Sep 11, 2016 · 1 comment

Comments

Projects
None yet
3 participants
@archerbj

archerbj commented Sep 11, 2016

问题简述 (One-line summary)

我在画多线段线图 轨迹图时

当 要画多线段 线图时,即

series:{
type:'lines',
polyline:ture
}

symbol 并不沿着 线段走的走向, 而是切线方向

当 ployline:false , 即两点线段时 , 才会沿着线段走的方向

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version):
  • 浏览器类型和版本 (Browser version):
  • 操作系统类型和版本 (OS Version):

重现步骤 (Steps to reproduce)

期望结果 (Expected behaviour)

多线段 线图时 symbol 沿着线段的方向 来画轨迹图 , 不知是现在无法实现还是使用问题

可能哪里有问题 (What went wrong)

ECharts配置项 (ECharts option)

option = {
var myChart = echarts.init(document.getElementById('second'));
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var option = {

    geo: {

        map: 'china',
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true,
                textStyle: {
                    color: 'white'
                }

            }
        },
        roam: true,

        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: 'red'
            }
        },
        regions: [{
            name: '西藏',
            label: {
                emphasis: {
                    show: true,
                    textStyle: {
                        color: '#000'
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    show: true,
                    areaColor: 'yellow'
                }
            }
        }]
    },

    series: {
        type: 'lines',
        name: "线图",
        coordinateSystem: 'geo', // 这里可以改成 bmap
        xAxisIndex: 0,
        yAxisIndex: 0,
        geoIndex: 0,
        // polyline: true,
        large: false,
        largeThreshold: 2000,
        lineStyle: {
            normal: {
                color: "#fff",
                width: 1,
                opacity: 0.4,
                curveness: 0.2
            }
        },
        label: {
            normal: {
                show: true,
                position: 'middle',
                formatter: '哈哈哈哈哈哈{c}',
                textStyle: {
                    color: '#000',
                    fontSize: 20
                }
            }
        },
        effect: {
            show: true,
            period: 4,
            color: 'blue',
            symbolSize: 20,
            symbol: planePath

        },
        data: [{
            name: "test",
            coords: [
                [100.5107, 23.2196], // 起点
                // [100.5107, 30.2196],
                [120.5107, 23.2196] // 终点
                // 如果 polyline 为 true 还可以设置更多的点
            ],
            // 统一的样式设置
            lineStyle: {
                normal: {
                    curveness: 0.2
                }
            },
            label: {
                normal: {
                    show: true
                }
            }
        }, {
            name: "testLines",
            coords: [
                [100.5107, 30.2196], // 起点
                [100.5107, 32.2196],
                [120.5107, 34.2196] // 终点
                // 如果 polyline 为 true 还可以设置更多的点
            ],


            // 统一的样式设置
            lineStyle: {
                normal: {
                    color: 'red',
                    width: 10
                }
            },
            label: {
                normal: {
                    show: true,
                    formatter: '哈哈{a}'
                }
            }
        }],
        zlevel: 2,
        z: 3
    }
}



myChart.setOption(option)
}

其他信息 (Other comments)

ployline:true, 能设置多个点 , symbol 方向总是沿着切线方向

image

ployline:false , 只能设置两个点 , symbol 方向正确

image

@100pah 100pah added the enhancement label Sep 18, 2016

@100pah 100pah closed this in f2c19e7 Sep 26, 2016

@itcongaili

This comment has been minimized.

Show comment
Hide comment
@itcongaili

itcongaili Dec 4, 2016

没看明白如何改,╮(╯▽╰)╭

itcongaili commented Dec 4, 2016

没看明白如何改,╮(╯▽╰)╭

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment