那些年，网页踩过的坑

1.pycharm社区版需要自己创建flask项目

具体步骤参见：https://blog.youkuaiyun.com/weixin_57871623/article/details/120777360

2.函数传参问题：

<li class="qua"><button onclick="getImage('{{ path_p }}', {{ title_p }})">正向</button></li>

path_p是图像路径，title_p是标题数组，传递内容如下：

getImage('./static/emotion_n.jpg', ['@剪川捡铲铲 这个人买娃买疯球了，大儿子还是白煮蛋，二儿子还在孕期，已经决定响应gj政策买三胎了…… ', '身体欠佳一月有余，忙着看顾魏医生，药吃了不少，补品虾姐夫囤了一个月的量，前几天我突然想到了一个严重的问题“干呕，食之无味，睡眠不好，腹胀”这不是差不多“怀孕期间的症状吗？”回想起来我两个月没来月经了正在我忐忑不安的思绪里是不是已响应国家号召政策三胎的时候，昨晚顾魏医生  ...展开', '不好意思，没怀上，没能为三胎政策出一份力 ', '融创森与海地处山清水秀的浦阳地界，依山傍水，潮湿地带，明知道以后会引起墙面发霉脱落的前提下，在公共区域采用瓷砖墙面流行的趋势下，森与海却将包含在合同范围内的公摊面积的电梯间，过道等公共区域采用乳胶漆墙面。在国家大力倡导二胎和三胎的政策下，在明知道教育是每个家庭的重中之重，大事宣  ...展开', '呃🤔看到大家对那个男明星爹味发言bot厌男之类的说法 其实厌男很正常他之前发的好多有的确实让我避雷了一些人这么说吧 一般他发十条我有六条会认同这次配音圈的事我也不发表意见但是我看到有人为了骂这个人 拿出国家三胎政策来讲 这个政策明明就是对女性的不公平啊 很多人都在反对 没有必要用这  ...展开', '#上海妇联回应婴幼儿被单独隔离问题#上海凭一己之力抵抗国家三胎政策 ', '#福建已发现6例感染者乘坐这趟动车#S海为什么不封 我是没想道我们中国也这样 之前都是吐槽外国政策，经济重要还是人口重要？现在国家政策要女人生二胎三胎 不就是先为了人口？感染的那些还会影响JZ 哪来人口 不就是一个城市吗？ 我们广州一有就封 还不是一线城市 真的无力吐槽 ', '#上海婴幼儿隔离点#就这就这还tm鼓励三胎政策 '])

经过实验，路径参数必须加单引号，之前标题数组外面也加单引号但是一部报错，网上查问题都说是没加单引号然后需要加上，不知道为什么我的问题相反，应该不加单引号。

3.html上传本地图片

<img id="ep" src="{{ url_for('static', filename='blank.png')}}" width="500" height="500" />

4.数组格式注意

直接从csv数据获得某列数值作为数组的话，元素之间没有逗号分隔，影响后续参数传递导致错误，因此最好新建一个空的数组，在往里面添加数据。

df = data.sort_values(by="集群密度", ascending=True)
    den = df['集群密度'].values
    title = df['标题'].values
    title_d = []
    density = []
    for i in range(0, len(title)):
        title_d.append(title[i])
        density.append(den[i])
        title_d[i] = title_d[i].replace('\n', '')

5.echarts图表y轴显示更多

var option = {
// grid-left调整y轴显示范围
            grid:{
                    top:48,
                    left:500,// 调整这个属性
                    right:50,
                    bottom:50,
                },
            tooltip: {},
            legend: {
                data:[{
                    name:'集群密度',
                    // 设置文本为红色
                    textStyle: {
                        color: 'green'}
                    }]
            },
            yAxis: {
                triggerEvent: true,
                data: title_d,
                // 下列调整y轴显示字数，显示不完全则用省略号
                axisLabel:{
                    show:true,
                    formatter:function(title_d){
                                    var texts=title_d;
                                    if(texts.length>30){ // 具体多少字就看自己了
                                    texts=texts.substr(0,30)+'...';
                                    }
                                    return texts;
                            }
                    }

            },
            xAxis: {},
            series: [{
                name: '集群密度',
                type: 'bar',
                data: den}]
        };

6.echarts鼠标停留在y轴标题上显示全部

myChart.setOption(option);
        extension(myChart);
        function extension(myChart) {
            //判断是否创建过div框,如果创建过就不再创建了
            var id = document.getElementById("extension");
            if(!id) {
                 var div = "<div id = 'extension' sytle=\"display:none\"></div>";
                 $('#main').append(div);
                }
            myChart.on('mouseover', function(params) {
                 if(params.componentType == "yAxis") {
                     $('#extension').css({
                         "position": "absolute",
                         "color": "black",
                         //"border":"solid 2px white",
                         "font-family": "Arial",
                         "font-size": "1em",
                         "padding": "5px",
                         "display": "inline"
                     }).text(params.value);
                     $("#main").mousemove(function(event) {
                         var xx = event.pageX - 30;
                         var yy = event.pageY + 20;
                         $('#extension').css('top', yy).css('left', xx);
                     });
                 }
            });
            myChart.on('mouseout', function(params) {
                if(params.componentType == "yAxis") {
                    $('#extension').css('display', 'none');
                }
            });
        };

注意：若产生一下报错：Uncaught ReferenceError: $ is not defined

是没有声明jquery的原因，在html头部进行声明即可

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

7.数组元素分行展示：

html代码：

<div class="left">
            <p id="tb" class="expand title"></p>
</div>

js函数代码：

function getImage( path, title )
    {
        str="";
        element2 = document.getElementById('tb');
        str += '<p class="word">群体情绪节目排行</p>'
        for (var i=0;i< title.length;i++)
            {
                str += '<p title="' + title[i] + '">'
                str += i + ': ' + title[i];
                str += '</p>'
            }
        element2.innerHTML = str;
    }

效果如下，鼠标移至内容上还可展现全部标题：