Vue 中使用vue2-highcharts实现top功能

最新推荐文章于 2024-08-16 07:45:12 发布

蔚蓝色天空sky

最新推荐文章于 2024-08-16 07:45:12 发布

阅读量1.9k

点赞数

分类专栏： vue 文章标签： vue2-highcharts vue柱状图 vue top10图表

本文链接：https://blog.csdn.net/ytangdigl/article/details/79014277

版权

本文介绍了如何在Vue项目中利用vue2-highcharts库创建展示Top10数据的柱状图。首先，通过在package.json中添加依赖并运行安装命令引入vue2-highcharts。接着，展示了具体的页面代码实现图表绘制，实现了所需的效果。

摘要由CSDN通过智能技术生成

1、要实现的效果如下图：
这里写图片描述

2、首先项目中引用vue2-highcharts
package.json中如下：
这里写图片描述

在命令行中输入：

cnpm install vue2-highcharts

3、页面代码如下：

<template>

  <div >
      <div>
        <div id="transparent-header" class="rank-head container" >
              <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/>


              <span >用能排名</span>
        </div>
      </div>

      <div >

            <div >
                <datepicker v-on:picked="picked" style="margin-left:10px;"></datepicker>
            </div>

                <div >

                </div>

      </div>

      <div >

           <div class="charts">
                    <vue-highcharts :options="options" ref="maxLineCharts"