Python引入echarts

img

img


我复制代码，直接粘贴，没有关键字显示什么颜色什么，运行的时候有背景颜色，但是图片出不来。怎么办

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <div id="main" style='width: 600px;height:400px;background:pink'></div>
     <script type="text/javascript">
        var main = echarts.init(document.getElementById("main"))

         var option = {
              backgroundColor: '#2c343c',
              title: {
                text: '电影票房',
                left: 'center',
                top: 20,
                textStyle: {
                  color: '#ccc'
                }
              },
              tooltip: {
                trigger: 'item'
              },
              visualMap: {
                show: false,
                min: 100000000,
                max: 10000000000,
                inRange: {
                  colorLightness: [0, 1]
                }
              },
              series: [
                {
                  name: '票房',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '50%'],
                  data: [
                    { value: 335, name: '亲情' },
                    { value: 310, name: '传记' },
                    { value: 274, name: '冒险' },
                    { value: 235, name: '军事' },
                    { value: 400, name: '动作' },
                    { value: 235, name: '动画' },
                    { value: 350, name: '喜剧' },
                    { value: 433, name: '奇幻' },
                    { value: 134, name: '家庭' },
                    { value: 295, name: '惊悚' },
                    { value: 456, name: '战争' },
                    { value: 234, name: '枪战' },
                    { value: 445, name: '灾难' },
                    { value: 545, name: '爱情' },
                    { value: 235, name: '犯罪' },
                    { value: 453, name: '科幻' },
                    { value: 495, name: '音乐' }



                  ].sort(function (a, b) {
                    return a.value - b.value;
                  }),
                  roseType: 'radius',
                  label: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  labelLine: {
                    lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                  },
                  itemStyle: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                    return Math.random() * 200;
                  }
                }
              ]
            };

         mian.setOptions(option);
    </script>

</body>
</html>

首先是前端代码有问题，拼写错误+函数调用错误：

mian.setOptions(option);
修改为：
main.setOption(option);

然后后端不知道你的目录结构是什么样的，代码我整理了一下：

from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
    return render_template('show.html')
if __name__ == "__main__":
    app.run()

然后show.html应该放在与python代码同目录下的templates文件夹内

请参考
https://blog.csdn.net/qq_27454363/article/details/125371756?spm=1001.2014.3001.5502

最后设置错了，改正最后一行代码

main.setOption(option);