javascript - echarts折线图如何将最后一段设置为虚线
大家讲道理
大家讲道理 2017-04-11 11:56:39
0
1
1233

已经试过了两种方法

方法一

通过设置两个折线图

series: [{
                    name: '月销售总额',
                    type: 'line',
                    stack: '总额',
                    symbol: "circle",
                    symbolSize: 10,
                    smooth: false,
                    /*lineStyle: {
                        normal: {
                            type: 'dashed'
                        }
                    },*/
                    itemStyle: {
                        normal: {
                            color: '#f77440',
                            label: {
                                show: true,
                                formatter: '{c}万',
                                textStyle: {
                                    color: '#6E6E6E',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [moneys[0],
                        moneys[1],
                        moneys[2],
                        moneys[3], '-'
                    ]
                }, {
                    name: '月销售总额',
                    type: 'line',
                    stack: '总额',
                    symbol: "circle",
                    symbolSize: 10,
                    smooth: false,
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#f77440',
                            type: 'dashed'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#f77440',
                            label: {
                                show: true,
                                formatter: '{c}万',
                                textStyle: {
                                    color: '#6E6E6E',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: ['-',
                        '-',
                        '-',
                        '-', moneys[4]
                    ]
                }]

方法二

series: [{
                    name: '月销售总额',
                    type: 'line',
                    stack: '总额',
                    symbol: "circle",
                    symbolSize: 10,
                    smooth: false,
                    /*lineStyle: {
                        normal: {
                            type: 'dashed'
                        }
                    },*/
                    itemStyle: {
                        normal: {
                            color: '#f77440',
                            label: {
                                show: true,
                                formatter: '{c}万',
                                textStyle: {
                                    color: '#6E6E6E',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [moneys[0],
                        moneys[1],
                        moneys[2],
                        moneys[3], {
                            value: moneys[4],
                            itemStyle: {
                                normal: {
                                    borderType: 'dashed'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            }
                        }
                       ]
                }
          ]

都是无法实现最后一段是折线。。

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

membalas semua(1)
Peter_Zhu

参考这个

    series: [{      
                    name: '月销售总额',
                    type: 'line',
                    stack: '总额',
                    symbol: "circle",
                    symbolSize: 10,
                    smooth: false,
                    /*lineStyle: {
                        normal: {
                            type: 'dashed'
                        }
                    },*/
                    itemStyle: {
                        normal: {
                            color: '#f77440',
                            label: {
                                show: true,
                                formatter: '{c}万',
                                textStyle: {
                                    color: '#6E6E6E',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [moneys[0],
                        moneys[1],
                        moneys[2],
                        moneys[3]
                    ]
                }, {
                    name: '月销售总额',
                    type: 'line',
                    stack: '总额',
                    symbol: "circle",
                    symbolSize: 10,
                    smooth: false,
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#f77440',
                            type: 'dashed'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#f77440',
                            label: {
                                show: true,
                                formatter: '{c}万',
                                textStyle: {
                                    color: '#6E6E6E',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [,
                        ,
                        ,
                        , moneys[4]
                    ]
                }]
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan