VUE2使用echarts-阿里云开发者社区

VUE2使用echarts

2022-04-25 702

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： echarts官方示例：http://www.echartsjs.com/examples/ 。

QQ图片20220425232802.jpg

这篇日志记录下vue安装及使用echarts。

1：安装：

npm install echarts –S

2：引入：

全局引入，会导致打包的时候将所有图表都打包，造成包的体积过大。

我没有使用这种方式，当然，这个看自己的需求。

按需引入：说白了就是在哪个页面使用，就在哪个页面引入。

echarts官方示例

http://www.echartsjs.com/examples/

上代码，这部分代码我是从我后台管理系统摘出：

<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>首页</BreadcrumbItem>
        <BreadcrumbItem>数据概览</BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
        <!-- {{title}} -->
        <div id="myChart" :style="{width: '85%', height: '500px'}"></div>
    </Content>
  </div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入折线图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
// 引入axios组件
import axios from "axios";
import qs from "qs"; //处理数据  qs.stringify(params)
import {checkRule} from '@/assets/js/public';//引入公共js文件
export default {
  data(){
    return{
    }
  },
  mounted(){
    const self = this;
    axios({
      method: "post",
      url: "你的url",
      data: {}
    })
      .then(function (response) {
        checkRule(response,self);//检查是否有权限
        self.drawLine(response.data.date,response.data.number);
      })
      .catch(function (response) {
        console.log(response);
      });
  },
  methods: {
    drawLine(date,number){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '近七天注册人数统计' },
            tooltip: {},
            xAxis: {
                data: date
            },
            yAxis: {},
            series: [{
                name: '注册人数',
                type: 'line',
                data: number
            }]
        });
    }
  }
}
</script>