前端框架vue.js系列教程(5)-vue.js中实现echarts绘图-知趣

前端框架vue.js系列教程：

安装配置node.js和npm
vue.js工程项目创建
vue.js框架应用开发
vue.js单页面应用开发
vue.js中实现echarts绘图
vue.js远程访问RESTful API接口示例
vue.js使用Fetch API访问RESTful API接口示例

ECharts是什么？

商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

Echarts支持的图表有折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表。

很容易在vue.js中使用ECharts绘制各种可视化图表。

在vue.js中使用ECharts绘图

安装echarts包

首先需要在项目中安装echarts依赖包。这可以使用npm来安装：

$ npm install echarts

然后在你vue项目的js文件中使用import导入它：

import * as echarts from 'echarts';

接下来我们在上一节所创建的hellovue-app项目基础上，实现几个常见ECharts图表的绘制。

绘制柱状图

请按以下步骤实现一个ECharts柱状图的绘制。

(1) 在项目的src/views/文件夹下，新创建一个名为Bar.vue的文件，并编辑代码如下：

<template>
  <h2>柱状图</h2>
  <div class="right">
      <p><pre>{{ items }}</pre></p>
  </div>

  <div class="left"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas" style="width: 600px;height:400px;"></div>    
  </div> 
</template>

<script>
    import * as echarts from 'echarts'     

    export default {
      name: 'BarGraph',
      data () {
        return {
          items: ''
        }
      },
      mounted () {
          // 根据准备好的dom初始化echarts实例
          var myChart = echarts.init(document.getElementById('canvas'));

          // 使用刚才指定的配置项和数据显示图表
          myChart.setOption({
            title: {
              text: '2016年11月平均销售额最高的5个品牌 (万元)（品牌, 平均销售额(万元)'
            },
            tooltip: {},
            legend: {
              data: ['平均销售额(万元)'],    // 要和series.name一致
              x:'right',
              y:'80px'              
            },
            xAxis: {
              type: 'category',
              data: ['SKII', 'DIOR', '美宝莲', '倩碧', '丝芙兰', '兰蔻']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '平均销售额(万元)',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          });
      }
    }
</script>

<!-- 添加"scoped"属性来限制CSS仅作用于这个组件 -->
<style scoped>
.left{
  width:50%;
}
.right{
  float:right;
  padding-right: 30px;
}
</style>

(2) 打开App.vue文件，设置一个对柱状图绘制的导航链接和渲染组件，代码如下：

<template>  
  <div class="navigate">
    <ul>
        <!--使用 router-link 组件进行导航 -->
        <li><router-link to="/">首页</router-link></li> 
    <li><router-link to="/bar">柱状图</router-link></li>
    </ul>
  </div>
  <div class="pages">
      <!-- 渲染在这里 -->
      <router-view></router-view>
  </div> 
</template>

<script>
  export default {
    name: 'App',
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.navigate{
  width:200px;
  float:left;
  background-color: aliceblue;
}
.pages{
  margin-left: 210px;
}
</style>

(3) 在main.js主文件中，导入路由组件(Bar.vue)并配置路由映射，实现代码如下：

import { createApp } from 'vue'
import App from './App.vue'

// 导入 vue router
import { createRouter, createWebHashHistory } from 'vue-router'

// 1. 定义路由组件.  
import BarPage from "./views/Bar.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/', component: BarPage },
    { path: '/bar', component: BarPage },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes: routes, // `routes: routes` 的缩写
})

// 5. 创建并挂载根实例
// createApp(App).mount('#app')     
const app = createApp(App)

// 确保 _use_ 路由实例使整个应用支持路由。
app.use(router)

 // 把App挂载到#app节点上
app.mount('#app')

(4) 测试结果。首先启动服务器：

$ npm run serve

然后打开浏览器，访问http://localhost:8080/，点击柱状图链接，可以看到如下的绘图界面：

绘制饼状图

同样地，在src/views/文件夹下，创建一个Pie.vue文件，编辑内容如下：

<template>
  <h2>饼状图</h2>
  <div class="right">
      <p><pre>{{ items }}</pre></p>
  </div>

  <div class="left"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas" style="width: 600px;height:400px;"></div>    
  </div> 
</template>

<script>
    import * as echarts from 'echarts'     

    export default {
      name: 'PieGraph',
      data () {
        return {
          items: ''
        }
      },
      mounted () {
          // 根据准备好的dom初始化echarts实例
          var myChart = echarts.init(document.getElementById('canvas'));

          // 使用刚才指定的配置项和数据显示图表
          myChart.setOption({
            title: {
              text: '销售额最高的5个品类，返回(品类，销售额)',
              subtext: '2016年11月',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              data: ['销售额'],    // 要和series.name一致
              x:'left',
              y:'center'
            },
            series: [{
                name: '销售额',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 1048, name: '服装' },
                  { value: 735, name: '玩具' },
                  { value: 580, name: '家用电器' },
                  { value: 484, name: '图书' },
                  { value: 300, name: '化妆品' }
                ],         
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]           
          });
      }
    }
</script>

<!-- 添加"scoped"属性来限制CSS仅作用于这个组件 -->
<style scoped>
.left{
  width:50%;
}
.right{
  float:right;
  padding-right: 30px;
}
</style>

修改App.vue，增加导航链接如下：

<li><router-link to="/pie">饼状图</router-link></li>

修改main.js，导入Pie.vue并增加路由映射，如下：

......
// 1. 定义路由组件.  
import BarPage from "./views/Bar.vue"
import PiePage from "./views/Pie.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/', component: BarPage },
    { path: '/bar', component: BarPage },
    { path: '/pie', component: PiePage },
]
......

测试结果。首先启动服务器，然后打开浏览器，访问 http://localhost:8080/，点击饼状图链接，可以看到如下的绘图界面：

绘制折线图

同样地，在src/views/文件夹下，创建一个Line.vue文件，编辑内容如下：

<template>
  <h2>折线图</h2>
  <div class="right">
      <p><pre>{{ items }}</pre></p>
  </div>

  <div class="left"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas" style="width: 600px;height:400px;"></div>    
  </div> 
</template>

<script>
    import * as echarts from 'echarts'     

    export default {
      name: 'LineGraph',
      data () {
        return {
          items: ''
        }
      },
      mounted () {
          // 根据准备好的dom初始化echarts实例
          var myChart = echarts.init(document.getElementById('canvas'));

          // 使用刚才指定的配置项和数据显示图表
          myChart.setOption({
              title: {
                text: '2016年11月总销售额的变化情况，返回(日期, 销售额(千万元))'
              },
              tooltip: { },
              legend: {
                data: ['销售额(千万元)'],    // 要和series.name一致
                x:'right',
                y:'30px'              
              },
              xAxis: {
                type: 'category',
                data: ['周一','周二','周三','周四','周五','周六','周日']  
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: '销售额(千万元)',
                  data: [820, 532, 901, 334, 1290, 730, 1320],    
                  type: 'line',
                  smooth: true
                }
              ]
            });
      }
    }
</script>

<!-- 添加"scoped"属性来限制CSS仅作用于这个组件 -->
<style scoped>
.left{
  width:50%;
}
.right{
  float:right;
  padding-right: 30px;
}
</style>

修改App.vue，增加导航链接如下：

<li><router-link to="/line">折线图</router-link></li>

修改main.js，导入Pie.vue并增加路由映射，如下：

......
// 1. 定义路由组件.  
import BarPage from "./views/Bar.vue"
import PiePage from "./views/Pie.vue"
import LinePage from "./views/Line.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/', component: BarPage },
    { path: '/bar', component: BarPage },
    { path: '/pie', component: PiePage },
    { path: '/line', component: LinePage },
]
......

测试结果。首先启动服务器，然后打开浏览器，访问 http://localhost:8080/，点击折线图链接，可以看到如下的绘图界面：

绘制折混图

同样地，在src/views/文件夹下，创建一个Line.vue文件，编辑内容如下：

<template>
  <h2>折混图</h2>
  <div class="right">
      <p><pre>{{ items }}</pre>   </p>
  </div>

  <div class="left"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas" style="width: 600px;height:400px;"></div>    
  </div> 
</template>

<script>
    import * as echarts from 'echarts'     

    // 指定图表的配置项和数据
    var option = {
            title: {
              text: '每天的总销售量和总评论数'
            },
            tooltip: {
              trigger:'axis',
              formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%'
            },
            legend: {
                data:['销量','占比'],
                x:'right'
            },
            xAxis: {
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] 
            },
            yAxis: [ 
              {
                type: 'value',
                name: '销量',
                show:true,
                interval: 10,
                axisLine: {
                    lineStyle: {
                        color: '#5e859e',
                        width: 2
                    }
                }
              },
              {
                type: 'value',
                name: '占比',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} %'
                },
                axisLine: {
                    lineStyle: {
                        color: '#5e859e',//纵坐标轴和字体颜色
                        width: 2
                    }
                }
            }],
            series: [{
                name: '销量',
                type: 'bar',
                barWidth : '50%',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] 
            },{
                name: '占比',
                type: 'line',
                smooth:true,
                data: [20.0, 22.0, 33.0, 45.5, 48.3, 78.2, 90.3, 103.4, 43.0, 26.5, 22.0, 16.2] 
            }]
        };

     export default {
          name: 'MixGraph',
          data () {
            return {
              items: ''
            }
          },
          mounted () {
              // 根据准备好的dom初始化echarts实例
              var myChart = echarts.init(document.getElementById('canvas'));
              // 使用指定的配置项和数据显示图表。
              myChart.setOption(option);
          }
        }
</script>

<!-- 添加"scoped"属性来限制CSS仅作用于这个组件 -->
<style scoped>
.left{
  width:50%;
}
.right{
  float:right;
  padding-right: 30px;
}
</style>

修改App.vue，增加导航链接如下：

<li><router-link to="/mix">折混图</router-link></li>

修改main.js，导入Mix.vue并增加路由映射，如下：

......
// 1. 定义路由组件.  
import BarPage from "./views/Bar.vue"
import PiePage from "./views/Pie.vue"
import LinePage from "./views/Line.vue"
import MixPage from "./views/Mix.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/', component: BarPage },
    { path: '/bar', component: BarPage },
    { path: '/pie', component: PiePage },
    { path: '/line', component: LinePage },
    { path: '/mix', component: MixPage },
]
......

测试结果。首先启动服务器，然后打开浏览器，访问http://http://localhost:8080/，点击折混图链接，可以看到如下的绘图界面：

本站网络名称：知趣

本站永久网址： https://www.qubaa.top

网站侵权说明：本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END