echarts简单入门

前一阵做了一个公众号投放的系统，后端同学做的，后期又出了公众号投放2.0，其中有几个模块交互比较复杂，交给前端来做了，其中一个模块是做一个坐标系，用来表示该公众号广告投放是否值得投放，发现他们项目里本身就引入了echarts，于是决定使用echarts做一个表格，以前没使用过echarts，只是知道有这么一个工具，用过之后发现，天呢，怎么有这么好用的小可爱啊，特意来分享一下

需求是这样的（说实话，虽然是给公司自己人用，需求没有分配UI资源，但是这也太丑啦）：

1、坐标系和函数图像的绘制见“计算逻辑”章节。

2、坐标系中的数据点包含“待审核”“审核通过”“排期中”“投放完成”4种状态的记录，分别用不同颜色展示。样式见上图。

在本地，使用echarts写了一个小demo，鼠标移入每一个坐标点都会显示坐标点的详细信息，做出来的效果图如下：

demo的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="chartmain" style="width:600px; height: 400px;margin:20px auto"></div>
</body>
</html>
<script type="text/javascript" src="./echarts.min.js"></script> 
<script type="text/javascript">

    //坐标图渲染函数
    // 传参示例
    // var dataPonit={    
    //     waitCheck:[[-8,490,'待审核1'],[2, 44,'待审核2']],  //待审核
    //     passCheck:[],  //审核通过
    //     bargaining:[], //议价完成
    //     putIn:[],      //投放完成
    // }
    //x的取值范围
    // var xArea=[-10,20]
    function renderPonit(dataPonit,xArea){
        //拟合曲线的函数
        function easingFunc(k){
            if(k>0){
                return Math.pow(k,2.5)
            }else if(k<0){
                return -Math.pow(Math.abs(x),2.3)
            }else if(k=0){
                return 0
            }
        }
        var dataLine = [];
        //根据需要的坐标轴生成拟合曲线的点
        for (var i = xArea[0]; i <= xArea[1]; i=i+0.01) {
            var x = i ;
            var y = easingFunc(x);
            dataLine.push([x, y]);
        }
        option = {
            title: {
                text: '账号质量与流量关系图',
                subtext: '(包含待审核、审核通过、议价通过、投放完成数据)'
            },
            tooltip: {
                //鼠标滑过触发散点展示的内容
                formatter: function (params) { 
                    console.log(params)
                    if (params.value.length > 1) {
                        return "文章：" + params.value[2] +
                        "<br />质量：" + params.value[0] + '<br />流量：'
                        + params.value[1];
                    }
                    else {
                        return params.name + ' : ' + params.value;
                    }
                },
            }, 
            legend: {
                x:'right',
                y:'top',
                data:['待审核','审核通过','议价完成','投放完成']
            },
            xAxis: [
                {
                    // name: '质量',
                    type: 'value',
                },
            ],
            yAxis: [
                {
                    // name: '流量',
                    type: 'value',
                },

            ],
            series: [
                {
                    name:'待审核',
                    type:'scatter',
                    symbolSize: 6, //圆点的size
                    itemStyle: {
                        color: 'red'
                    },
                    data:dataPonit.waitCheck
                },
                {
                    name:'审核通过',
                    type:'scatter',
                    symbolSize: 6,
                    itemStyle: {
                        color: 'green'
                    },
                    data:dataPonit.passCheck
                },
                {
                    name:'议价完成',
                    type:'scatter',
                    symbolSize: 6,
                    itemStyle: {
                        color: '#33FFFF'
                    },
                    data:dataPonit.bargaining
                },
                {
                    name:'投放完成',
                    type:'scatter',
                    symbolSize: 6,
                    itemStyle: {
                        color: 'black'
                    },
                    data:dataPonit.putIn
                },
                {
                    name:'拟合曲线',
                    type:'line',
                    smooth: true,
                    showSymbol: false,  //是否显示圆点
                    data:dataLine
                }
            ]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    }
    

    //传入每个点的坐标[x,y,'文章名称']
    var dataPonit={    
        waitCheck:[[-8,490,'待审核1文章名称'],[2, 44,'待审核2文章名称'],[2.2, 606,'待审核3文章名称'],[4.4, 250,'待审核4文章名称'],[6.6, 800,'apple文章名称'] ],  //待审核
        passCheck:[[8,-90,'审核通过1文章名称'],[-2, -50,'审核通过2文章名称'],[2.2, -70,'审核通过3文章名称'],[4.4, -40,'审核通过4文章名称'],[-6.6, 300,'apple文章名称'] ],  //审核通过
        bargaining:[[8,900,'议价完成1文章名称'],[2, 50,'议价完成2文章名称'],[2.2, 70,'议价完成3文章名称'],[4.4, 400,'议价完成4文章名称'],[6.6, -30,'apple文章名称'] ], //议价完成
        putIn:[[-8, 400,'投放完成1文章名称'],[11, 300,'投放完成2文章名称'] ],      //投放完成
    }
    //传入x的取值范围
    var xArea=[-10,30]
    renderPonit(dataPonit,xArea)
</script>

posted @ 2019-08-23 14:04 Katydids 阅读(447) 评论(0) 收藏举报

刷新页面返回顶部

蝈蝈flying

echarts简单入门

公告