Echarts进行简单的前端页面美化和交互

最新推荐文章于 2024-05-21 23:21:19 发布

爱玩的程序猿

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量625

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_53311560/article/details/125784329

版权

Echarts的基本使用

首先将编译好的文件进行下载:

一般最小版的就可以用：

本地的echarts目录：

D:\zhangxinfile\ECHARTS_study\EchartsTest\echarts-5.3.3\package\dist

ECharts 在线构建 (apache.org)

也可以选择在上方网址中在线定制

引入 Apache ECharts

在head中进行引入

<!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

 <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>

前台flask传入数据进行进一步操作

@app.route('/score')
def score():
    score = []  #评分
    num = []    #每个评分所统计出的电影数量
    con = sqlite3.connect("movie.db")
    cur = con.cursor()
    sql = "select score,count(score) from movie250 group by score"
    data = cur.execute(sql)
    for item in data:
        score.append(str(item[0]))   #要注意此时为字符串，在前台要进行一下转换 
        num.append(item[1])

    cur.close()
    con.close()
    return render_template("score.html",score= score,num=num)

python数据以列表的形式传递到前端

<script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {

    color:['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right:'4%',
        bottom:'3%',
        containLabel:true
    },
    xAxis: {
        type: 'category',
        data: {{ score|tojson }}     <!--将数据转化为json格式的数据-->
        <!--['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','999']-->
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: {{ num }},
            <!--[120, 20, 150, 80, 70, 110, 130,200],-->
        barWidth:'60%',
        type:'bar'
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>