echarts的五大使用步骤 vue+element项目

王工丶要专注

已于 2022-12-15 15:15:15 修改

阅读量621

点赞数 1

文章标签： echarts javascript vue.js

于 2022-11-11 16:11:14 首次发布

本文链接：https://blog.csdn.net/qq_44224811/article/details/127808029

版权

首先看页面效果
在这里插入图片描述
echarts官网链接：https://echarts.apache.org/zh/index.html
注意点如果你的项目之前没有其他全部安装echarts需要加入这两步

注意点一
npm install echarts --save
注意点二
在main.js中全局引入 echarts
import * as echarts from ‘echarts’
Vue.prototype.$echarts = echarts

// 1.导入echarts

import * as echarts from 'echarts'

// 2.为 ECharts 准备一个定义了宽高的 DOM

 <div id="main" style="width: 100%; height: 400px"></div>

// 3.基于准备好的dom，初始化echarts实例
// 4.准备数据和配置项
// 指定图表的配置项和数据
// 合并数据
// 5.展示数据

  mounted() {
    // 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    // 4.指定图表的配置项和数据
    var option = {
      /*  */
      title: {
        subtext: '添加人数'
      },
      xAxis: {
        type: 'category',
        data: [
          '2022-01-11',
          '2022-01-12',
          '2022-01-13',
          '2022-01-14',
          '2022-01-15',
          '2022-01-16',
          '2022-01-17'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [10, 25, 50, 65, 80, 95, 100],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
    // 5.使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },

整体代码如下：

<template>
  <page-index>
    <!--  -->
    <div>
      <el-form ref="form" :model="searchForm" label-width="80px" size="medium">
        <!--    <el-form-item label="活动名称">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item> -->

        <div class="sousuo">
          <div class="sousuo1">
            <el-form-item label="渠道名称">
              <el-select
                v-model="searchForm.region"
                placeholder="请选择活动区域"
              >
                <div class="kuangneik">
                  <el-input
                    v-model="searchForm.name"
                    class="kuangneik1"
                  ></el-input>
                  <el-button
                    icon="el-icon-search"
                    class="kuangneik2"
                  ></el-button>
                </div>
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="sousuo2">
            <el-form-item label="渠道活码名称" label-width="98px">
              <el-select
                v-model="searchForm.region"
                placeholder="请选择活动区域"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sousuo4">
            <el-date-picker
              size="medium"
              v-model="value2"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </div>

          <div class="sousuo3">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 数据统计标题 -->
    <div class="sjtjk">
      <span class="sjtjxian"></span>
      <span class="sjtjtitle">数据统计</span>
    </div>

    <!-- 灰色标题 -->
    <div class="zongtianjia">
      <div class="tianjiaimg">
        <img src="@/assets/images/datapeople.png" alt="" />
      </div>
      <div class="tianjiazi">
        <div class="tianjiazitop">
          <el-tooltip
            class="item"
            effect="dark"
            content="总添加人数：
    所选时间范围内，通过选中渠道的活码，添加客户数的总和"
            placement="top"
          >
            <span>总添加人数</span>
          </el-tooltip>
        </div>
        <div class="tianjiazibottom">0</div>
      </div>
    </div>

    <div class="download">
      <div class="downloadbutton">
        <el-button type="primary" size="medium">下载明细</el-button>
      </div>
    </div>

    <!-- 2.第二部准备具体宽高的容器为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 100%; height: 400px"></div>
  </page-index>
</template>
<script>
/* 1.导入echarts */
import * as echarts from 'echarts'
/*  */
import PageIndex from '@/components/page-index'
import xcTable from '@/base-ui/table'
import Pagination from '@/components/pagination'

export default {
  components: {
    PageIndex,
    xcTable,
    Pagination
  },
  data() {
    return {
      /*  */
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      searchForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  created() {
    /*   this.init() */
  },
  mounted() {
    // 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    // 4.指定图表的配置项和数据
    var option = {
      /*  */
      title: {
        subtext: '添加人数'
      },
      xAxis: {
        type: 'category',
        data: [
          '2022-01-11',
          '2022-01-12',
          '2022-01-13',
          '2022-01-14',
          '2022-01-15',
          '2022-01-16',
          '2022-01-17'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [10, 25, 50, 65, 80, 95, 100],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
    // 5.使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.sjtjk {
  width: 100%;
  display: flex;
  height: 20px;
}

.sjtjxian {
  width: 3px;
  height: 20px;
  background-color: #3370ff;
  display: block;
  border-radius: 4px;
}

.sjtjtitle {
  line-height: 19px;
  margin-left: 10px;
}

/*  */
.zongtianjia {
  width: 300px;
  height: 80px;
  background-color: #fbfbfd;
  padding-top: 10px;
  padding-left: 10px;
  margin-top: 10px;
  display: flex;
  margin-left: 10px;
}
.tianjiazi {
  margin-left: 15px;
}

.tianjiazitop {
  color: #909399;
}

.tianjiazibottom {
  font-size: 22px;
  font-weight: bold;
}

.download {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: -20px;
}

.kuangneik {
  width: 100%;
  padding: 20px;
}
.kuangneik1 {
  width: 74%;
}

/* 搜索框 */
.sousuo {
  width: 100%;
  display: flex;
}

.sousuo1 {
  width: 24%;
  margin-right: 8px;
}

.sousuo2 {
  width: 24%;
  margin-right: 8px;
}

.sousuo4 {
  margin-top: 4px;
}
</style>