echart2.0实现折线图转折点闪烁效果

option = {
    title : {
        text: '某楼盘销售情况',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['意向','预购','成交']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六'
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现折线图动态tooltip效果,可以通过以下步骤进行操作: 1. 在echarts中定义一个tooltip组件,然后设置trigger为'axis',显示为true。 2. 定义一个formatter函数,用于设置tooltip的显示内容。可以在formatter函数中获取到当前鼠标所在的位置,然后通过echarts中的API获取到当前位置对应的数据信息。 3. 在图表的series中设置markPoint和markLine,用于在折线图上画出当前鼠标所在位置的点和线。 4. 在图表的option中设置tooltip的extraCssText属性,用于设置tooltip的样式。可以设置样式的颜色、背景色、字体等。 5. 最后,在option中设置animationDuration属性,用于设置动态效果的时间。 下面是一个示例代码: ```javascript option = { tooltip: { trigger: 'axis', show: true, formatter: function (params) { var res = params[0].name; for (var i = 0, l = params.length; i < l; i++) { res += '<br/>' + params[i].seriesName + ' : ' + params[i].value; } return res; }, extraCssText: 'background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 10px;' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'Sales', type: 'line', data: [120, 200, 150, 80, 70, 110, 130], markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }] }, markLine: { data: [{ type: 'average', name: '平均值' }] } }], animationDuration: 1000 }; ``` 以上代码实现折线图的动态tooltip效果,通过设置formatter函数和extraCssText属性,可以自定义tooltip的样式和内容。通过设置markPoint和markLine,可以在折线图上画出当前鼠标所在位置的点和线,实现动态效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值