Echarts - 散点图 样式修改

option = {
    title:{
        text:'30天'
    },
    xAxis: {
        axisLabel:{
            formatter:'{value}%'
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed'
            }
        },
    },
    yAxis: {
        splitLine:{
            show:false
        }
    },
     tooltip:{
        trigger: 'axis',
        // cross
        axisPointer: {type: 'none'},
        formatter: function (params, ticket, callback) {
            var showHtm=params[0].data[2]+'<br>';
            showHtm+= '触达量: ' + params[0].data[0] + '&nbsp;&nbsp;&nbsp;'
            showHtm+= '触达率: ' + params[0].data[1] + '%'
            return showHtm;
        }
    },
    series: [{
        symbolSize: 20,
        itemStyle:{
            normal:{
                color:'#0269bf',
                shadowColor:'#83bff6',
                shadowBlur:3,
                shadowOffsetX:1,
                shadowOffsetY:2
            }
        },
        data: [
            [10.0, 8.04,'一'],
            [18.0, 6.95,'一'],
            [13.0, 7.58,'一'],
            [29.0, 8.81,'一'],
            [11.0, 8.33,'一'],
            [14.0, 9.96,'一'],
            [36.0, 7.24,'一'],
            [44.0, 4.26,'一'],
            [12.0, 10.84,'一'],
            [57.0, 4.82,'一'],
            [69.0, 5.68,'一']
        ],
        type: 'scatter'
    }]
};

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts散点图是一种数据可视化图表,用于展示不同数据之间的分布和关系。要使用ECharts散点图,需要以下几: 1. 数据准备:首先需要准备要展示的数据,通常是以数组的形式存储的数据集合。每个数据通常由横坐标和纵坐标确定。 2. 引入ECharts库:在HTML页面中引入ECharts库,可以通过CDN方式引入,也可以将其下载到本地后引入。 3. 创建DOM容器:在HTML中创建一个DOM容器,用于放置ECharts散点图。 4. 初始化ECharts实例:通过调用ECharts提供的API,创建一个ECharts实例对象。这个实例对象是用于管理和操作图表的主要对象。 5. 设置图表配置项:通过调用ECharts提供的API,设置散点图的配置项。配置项包括图表的类型、标题、坐标轴、图例等。 6. 填充数据:将准备好的数据填充到散点图中,使用ECharts提供的API,将数据传递给实例对象。 7. 渲染图表:通过调用ECharts提供的API,调用实例对象的渲染方法,将图表渲染到之前创建的DOM容器中。 8. 样式美化:根据需要,可以通过调整配置项,修改样式、颜色、大小等,以及调整背景色、边框等图表的样式。 9. 事件交互:可以通过监听ECharts提供的事件,实现与用户的交互。例如,当鼠标悬停在数据上时,显示该的详细信息。 10. 配置图表图例:根据需要,可以通过设置图例的位置、样式等,使其更加清晰地说明图表的含义。 总之,使用ECharts散点图需要准备数据、引入ECharts库、创建DOM容器、初始化实例、设置配置项、填充数据、渲染图表、样式美化、事件交互以及配置图例等步骤。通过这些步骤,可以方便地展示数据的分布和关系。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值