vue引入图形组件echarts v-charts

最新推荐文章于 2024-08-10 08:16:24 发布

大小先生

最新推荐文章于 2024-08-10 08:16:24 发布

阅读量2.5k

点赞数 3

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_37293274/article/details/107020184

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

整体效果图片：

一、引入echarts

第一步：引入依赖

npm install echarts -S

第二步：配置main.js

引入全局变量，可减少页面配置

import echarts from 'echarts'

Vue.prototype.$echarts = echarts;

局部变量

  import echarts from 'echarts'

第三步：页面加载数据

    <div id="container" style="height: 500px"  ref="chart"></div>
    
    mounted () {
      this.initCharts();
    },
    methods: {
      initCharts(){
        var dom = document.getElementById("container");
        //全局
        var myChart = this.$echarts.init(dom)
        //局部
        var myChart = echarts.init(dom);
        }
    }

展示效果：

二、引入v-charts

第一步：引入变量

npm install v-echarts echarts --save

第二步：main.js引入配置

import VCharts from 'v-charts'
Vue.use(VCharts);

第三步：页面数据渲染

<ve-chart :data="testData" :settings="chartSettings"></ve-chart>  
testData: {
    columns: ['日期', '访问用户', '下单用户', '二次访问'],
      rows: [
      { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '二次访问': 500 },
      { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '二次访问': 200 },
      { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '二次访问': 300 },
      { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '二次访问': 1200 },
      { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '二次访问': 2500 },
      { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '二次访问': 1356 }
    ]
  },
  chartSettings: {}

效果图如下：

以上就是两种图表控件的引入方式，在此记录一下。

官网地址

v-charts官网地址

echarts官网地址

完整代码如下：

<template>
  <div id="app">
    <el-row>
      <el-col  :span="24">
        <div id="container" style="height: 500px"  ref="chart"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button @click="changeType">切换图表类型</el-button>
        <ve-chart :data="testData" :settings="chartSettings"></ve-chart>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <ve-pie :data="chartData"></ve-pie>
      </el-col>
      <el-col :span="12">
        <ve-histogram :data="histogramData"></ve-histogram>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <ve-heatmap :data="heatmapData" :settings="heatmapSettings"></ve-heatmap>
      </el-col>
      <el-col :span="12">
        <ve-radar :data="radarData" :settings="radarSettings"></ve-radar>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <ve-line :data="lineData"></ve-line>
      </el-col>
      <el-col :span="12">
        <ve-scatter :data="scatterData" :settings="scatterSettings"></ve-scatter>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <ve-wordcloud :data="wordcloudData" :settings="wordcloudSettings"></ve-wordcloud>
      </el-col>
      <el-col :span="6">
        <ve-funnel :data="funnelData" :settings="funnelSettings"></ve-funnel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'notice',
    components: {},
    data() {
      return {
        option:null,
        funnelSettings : {
          sequence: ['订单', '点击', '访问', '展示'],
          ascending:true//倒转
        },
        funnelData: {
          columns: ['状态', '数值'],
          rows: [
            { '状态': '展示', '数值': 900 },
            { '状态': '访问', '数值': 600 },
            { '状态': '点击', '数值': 300 },
            { '状态': '订单', '数值': 100 }
          ]
        },
        wordcloudSettings: {
          sizeMin: 30,
          sizeMax: 60
        },
        wordcloudData: {columns: ['word', 'count'],rows:[]},
        scatterSettings: {
          legendName: {
            '上海': '上海1'
          },
          labelMap: {
            '访问用户': 'PV'
          }
        },
        scatterData: {
          columns: ['日期', '访问用户', '下单用户', '年龄'],
          rows: {
            '上海': [
              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
              { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
              { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
              { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
              { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
            ],
            '北京': [
              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
              { '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },
              { '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
              { '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },
              { '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },
              { '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }
            ],
            '广州': [
              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
              { '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },
              { '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
              { '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },
              { '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }
            ]
          }
        },
        heatmapSettings: {
          key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',
          bmap: {
            center: [120.14322240845, 30.236064370321],
            zoom: 14,
            roam: true
          },
          type: 'bmap'
        },
        heatmapData: {
          columns: ['lat', 'lng'],
          rows: [
            { 'lat': 120.14322240845, 'lng': 30.236064370321 },
            { 'lat': 120.14301682797, 'lng': 30.236035316745 },
            { 'lat': 120.14138577045, 'lng': 30.236113748704 },
            { 'lat': 120.1400398833, 'lng': 30.235973050702 },
            { 'lat': 120.13893453465, 'lng': 30.23517220446 },
            { 'lat': 120.1382899739, 'lng': 30.234062922977 },
            { 'lat': 120.13265960629, 'lng': 30.231641351722 },
            { 'lat': 120.13170681763, 'lng': 30.229925745619 },
            { 'lat': 120.13119614803, 'lng': 30.228996846637 },
            { 'lat': 120.13023980134, 'lng': 30.228226570416 }
          ]
        },
        radarSettings: {
          labelMap: {
            'date': '日期',
            'PV': '访问用户',
            'Order': '下单用户',
            'orderRate': '下单率'
          }
        },
        radarData: {
          columns: ['date', 'PV', 'Order', 'orderRate'],
          rows: [
            { 'date': '1/1', 'PV': 1393, 'Order': 1093, 'orderRate': 0.32 },
            { 'date': '1/2', 'PV': 3530, 'Order': 3230, 'orderRate': 0.26 },
            { 'date': '1/3', 'PV': 2923, 'Order': 2623, 'orderRate': 0.76 },
            { 'date': '1/4', 'PV': 1723, 'Order': 1423, 'orderRate': 0.49 },
            { 'date': '1/5', 'PV': 3792, 'Order': 3492, 'orderRate': 0.323 },
            { 'date': '1/6', 'PV': 4593, 'Order': 4293, 'orderRate': 0.78 }
          ]
        },
        typeArr: ['line', 'histogram', 'pie', 'radar'],
        index: 0,
        testData: {
          columns: ['日期', '访问用户', '下单用户', '二次访问'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '二次访问': 500 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '二次访问': 200 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '二次访问': 300 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '二次访问': 1200 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '二次访问': 2500 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '二次访问': 1356 }
          ]
        },
        chartSettings: {},
        chartData: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '1/1', '访问用户': 1393 },
            { '日期': '1/2', '访问用户': 3530 },
            { '日期': '1/3', '访问用户': 2923 },
            { '日期': '1/4', '访问用户': 1723 },
            { '日期': '1/5', '访问用户': 3792 },
            { '日期': '1/6', '访问用户': 4593 }
          ]
        },
        lineData: {
          columns: ['日期', '销售额'],
          rows: [
            { '日期': '1月1日', '销售额': 123 },
            { '日期': '1月2日', '销售额': 1223 },
            { '日期': '1月3日', '销售额': 2123 },
            { '日期': '1月4日', '销售额': 4123 },
            { '日期': '1月5日', '销售额': 3123 },
            { '日期': '1月6日', '销售额': 7123 }
          ]
        },
        histogramData: {
          columns: ['日期', '访问用户', '下单用户', '二次访问'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '二次访问': 500 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '二次访问': 200 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '二次访问': 300 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '二次访问': 1200 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '二次访问': 2500 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '二次访问': 1356 }
          ]
        }
      }
    },
    mounted () {
      this.initCharts();
    },
    created() {
      this.dataFirst()
    },
    methods: {
      initCharts(){
        var dom = document.getElementById("container");
        var myChart = this.$echarts.init(dom)
          //echarts.init(dom);
        var app = {};
        var base = +new Date(1968, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var date = [];

        var data = [Math.random() * 300];

        for (var i = 1; i < 20000; i++) {
          var now = new Date(base += oneDay);
          date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
          data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }

        this.option = {
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%'];
            }
          },
          title: {
            left: 'center',
            text: '大数据量面积图',
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
          },
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
          }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          series: [
            {
              name: '模拟数据',
              type: 'line',
              smooth: true,
              symbol: 'none',
              sampling: 'average',
              itemStyle: {
                color: 'rgb(255, 70, 131)'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                }, {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }])
              },
              data: data
            }
          ]
        };
        console.log(this.option)
        if (this.option && typeof this.option === "object") {
          myChart.setOption(this.option, true);
        }
      },
      dataFirst() {
        this.chartSettings = { type: this.typeArr[0] };
        this.wordcloudData= {
          columns: ['word', 'count'], rows: [{
            'word': 'visualMap',
            'count': 22199
          }, {
            'word': 'continuous',
            'count': 10288
          }, {
            'word': 'contoller',
            'count': 620
          }, {
            'word': 'series',
            'count': 274470
          }, {
            'word': 'gauge',
            'count': 12311
          }, {
            'word': 'detail',
            'count': 1206
          }, {
            'word': 'piecewise',
            'count': 4885
          }, {
            'word': 'textStyle',
            'count': 32294
          }, {
            'word': 'markPoint',
            'count': 18574
          }, {
            'word': 'pie',
            'count': 38929
          }, {
            'word': 'roseType',
            'count': 969
          }, {
            'word': 'label',
            'count': 37517
          }, {
            'word': 'emphasis',
            'count': 12053
          }, {
            'word': 'yAxis',
            'count': 57299
          }, {
            'word': 'name',
            'count': 15418
          }, {
            'word': 'type',
            'count': 22905
          }, {
            'word': 'gridIndex',
            'count': 5146
          }, {
            'word': 'normal',
            'count': 49487
          }, {
            'word': 'itemStyle',
            'count': 33837
          }, {
            'word': 'min',
            'count': 4500
          }, {
            'word': 'silent',
            'count': 5744
          }, {
            'word': 'animation',
            'count': 4840
          }, {
            'word': 'offsetCenter',
            'count': 232
          }, {
            'word': 'inverse',
            'count': 3706
          }, {
            'word': 'borderColor',
            'count': 4812
          }, {
            'word': 'markLine',
            'count': 16578
          }, {
            'word': 'line',
            'count': 76970
          }, {
            'word': 'radiusAxis',
            'count': 6704
          }, {
            'word': 'radar',
            'count': 15964
          }, {
            'word': 'data',
            'count': 60679
          }, {
            'word': 'dataZoom',
            'count': 24347
          }, {
            'word': 'tooltip',
            'count': 43420
          }, {
            'word': 'toolbox',
            'count': 25222
          }, {
            'word': 'geo',
            'count': 16904
          }, {
            'word': 'parallelAxis',
            'count': 4029
          }]
        }
      },
      changeType() {
        this.index++
        if (this.index >= this.typeArr.length) {
          this.index = 0
        }
        this.chartSettings = { type: this.typeArr[this.index] }
      }
    }
  }
</script>