学废了吗_搜索结果对应不同图表

最新推荐文章于 2024-05-22 14:04:08 发布

码者_荣耀

最新推荐文章于 2024-05-22 14:04:08 发布

阅读量279

点赞数

文章标签： elementui vue.js javascript echarts

本文链接：https://blog.csdn.net/Faker96/article/details/122163332

版权

<template>
  <div>
    <div class="main">
      <div style="text-align: center">
        <el-autocomplete v-model="state_1" :fetch-suggestions="search_1" placeholder="请输入名称" @select="(e) => (select_1 = e.value)"></el-autocomplete>
      </div>
      <div style="text-align: center">
        <el-autocomplete v-model="state_2" :fetch-suggestions="search_2" placeholder="请输入账号" @select="(e) => (select_2 = e.value)"></el-autocomplete>
      </div>

      <el-button style="margin-right: 10px" type="primary" @click="changeData">搜索</el-button>
    </div>
    <div class="main">
      <div class="chart" ref="myChart_1"></div>
      <div class="chart" ref="myChart_2"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      data: [],
      selected_key: '',

      myChart_1: null,
      list_1: [],
      state_1: '',
      select_1: '',

      myChart_2: null,
      list_2: [],
      state_2: '',
      select_2: '',
    };
  },
  methods: {
    //一般请求数据都是异步的
    getData() {
      return new Promise((res) => {
        setTimeout(() => {
          res({
            'aaa  111111': {
              series: ['人文社区', '娱乐版块', '美食', '美景'],
              datas: [
                {
                  series: ['下载量', '浏览量'],
                  data: ['133', '122'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['33', '22'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['13', '12'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['333', '522'],
                },
              ],
              browsers: {
                series: ['ABC', 'AAA', 'BBB', 'CCC'],
                datas: [
                  {
                    dataS: [14, 15, 16, 17],
                  },
                ],
              },
            },
            'bbb  222222': {
              series: ['人文社区', '汽车', '美食', '美景'],
              datas: [
                {
                  series: ['下载量', '浏览量', '评论'],
                  data: ['133', '122', '13'],
                },
                {
                  series: ['下载量', '浏览量', '评论'],
                  data: ['33', '22', '12'],
                },
                {
                  series: ['下载量', '浏览量', '评论'],
                  data: ['13', '12', '12'],
                },
                {
                  series: ['下载量', '浏览量', '评论'],
                  data: ['333', '522', '10'],
                },
              ],
              browsers: {
                series: ['ABC', 'AAA', 'BBB', 'CCC'],
                datas: [
                  {
                    dataS: [14, 15, 16, 17],
                  },
                ],
              },
            },
            'ccc  333333': {
              series: ['人文社区', '明星', '美食', '美景'],
              datas: [
                {
                  series: ['下载量', '浏览量'],
                  data: ['133', '122'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['33', '22'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['13', '12'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['33', '22', '2'],
                },
              ],
              browsers: {
                series: ['ABC', 'AAA', 'BBB', 'CCC'],
                datas: [
                  {
                    dataS: [14, 15, 16, 17],
                  },
                ],
              },
            },
          });
        }, 300);
      });
    },

    //缓存key到内存里面 方便搜索调用
    hashKey(data) {
      Object.keys(data).forEach((v) => {
        let sp = v.split('  ');
        this.list_1.push({ label: sp[0], value: sp[0] });
        this.list_2.push({ label: sp[1], value: sp[1] });
      });
    },
    //名称搜索提示
    search_1(str, cb) {
      let res = str ? this.list_1.filter((item) => ~item.value.toLowerCase().indexOf(str.toLowerCase())) : this.list_1;
      cb(res); // 调用 callback 返回建议列表的数据
    },
    search_2(str, cb) {
      let res = str ? this.list_2.filter((item) => ~item.value.toLowerCase().indexOf(str.toLowerCase())) : this.list_2;
      cb(res); // 调用 callback 返回建议列表的数据
    },

    //初始化echarts绘图的dom
    initChart() {
      this.myChart_1 = echarts.init(this.$refs.myChart_1);
      this.myChart_2 = echarts.init(this.$refs.myChart_2);
    },
    //获取到的data进行绘图
    drawChart_1() {
      let data = this.data[this.selected_key];
      let chartData = []; //图表数据
      let seriesName = data.datas[0].series; //各个series的名字

      //转换一下数据
      data.series.forEach((v, i) => {
        chartData.push([v, ...data.datas[i].data]);
      });

      let series = [
        {
          name: seriesName[0],
          type: 'bar',
          itemStyle: {
            color: '#00a3eb',
          },
        },
        {
          name: seriesName[1],
          type: 'bar',
          itemStyle: {
            color: '#23af4c',
          },
          barGap: 0,
        },
      ];

      //三个列的情况
      if (chartData[0].length === 4) {
        series.push({
          name: seriesName[2],
          type: 'bar',
          itemStyle: {
            color: '#fef303',
          },
        });
      }

      //echarts 配置项
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        legend: {
          data: seriesName,
          bottom: 0,
        },
        xAxis: [
          {
            type: 'category',
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: {
          type: 'value',
        },
        dataset: {
          sourceHeader: false,
          source: chartData,
        },
        series: series,
      };

      //绘图
      this.myChart_1.setOption(option, true);

      //自适应
      window.onresize = () => {
        this.myChart_1.resize();
      };
    },
    //绘制饼图
    drawChart_2() {
      let data = this.data[this.selected_key].browsers;
      let chartData = []; //图表数据

      //转换一下数据
      data.series.forEach((v, i) => {
        chartData.push({
          value: data.datas[0].dataS[i],
          name: v,
        });
      });

      //echarts 配置项
      let option = {
        tooltip: {
          trigger: 'item',
        },
				legend: {
          data: data.series,
          bottom: 0,
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: chartData,
            label: {
              formatter: '{b}: {d}%',
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      //绘图
      this.myChart_2.setOption(option, true);

      //自适应
      window.onresize = () => {
        this.myChart_2.resize();
      };
    },

    //重新绘制数据
    changeData() {
      if (this.select_1 === '') {
        this.$message.error('请输入名称');
        return;
      }
      if (this.select_2 === '') {
        this.$message.error('请输入名字');
        return;
      }

      this.selected_key = this.select_1 + '  ' + this.select_2;

      if (!(this.selected_key in this.data)) {
        this.$message.error(this.selected_key + '查询数据失败');
        return;
      }

      this.drawChart_1();
      this.drawChart_2();
    },
  },
  mounted() {
    this.initChart();
    this.getData().then((e) => {
      this.data = e;
      this.hashKey(e);

      //初始化显示第一个人的数据
      this.selected_key = 'aaa  111111';
      this.drawChart_1();
      this.drawChart_2();
    });
  },
};
</script>

<style>
.chart {
  margin: 20px auto;
  width: 80%;
  height: 600px;
}
.main {
  display: flex;
  width: 100%;
  gap: 10px;
  margin-top: 80px;
}
.main > div {
  width: calc(50%);
}
</style>

<div>

<el-autocomplete v-model="state_1" :fetch-suggestions="search_1" placeholder="请输入名称" @select="(e) => (select_1 = e.value)"></el-autocomplete>

</div>

<el-autocomplete v-model="state_2" :fetch-suggestions="search_2" placeholder="请输入账号" @select="(e) => (select_2 = e.value)"></el-autocomplete>

</div>

<el-button style="margin-right: 10px" type="primary" @click="changeData">搜索</el-button>

</div>

</div>

</template>

import * as echarts from 'echarts';

export default {

data() {

return {

data: [],

selected_key: '',

myChart_1: null,

list_1: [],

state_1: '',

select_1: '',

myChart_2: null,

list_2: [],

state_2: '',

select_2: '',

};

methods: {

//一般请求数据都是异步的

getData() {

return new Promise((res) => {

setTimeout(() => {

res({

'aaa 111111': {

series: ['人文社区', '娱乐版块', '美食', '美景'],

datas: [

{

series: ['下载量', '浏览量'],

data: ['133', '122'],

{

series: ['下载量', '浏览量'],

data: ['33', '22'],

{

series: ['下载量', '浏览量'],

data: ['13', '12'],

{

series: ['下载量', '浏览量'],

data: ['333', '522'],

browsers: {

series: ['ABC', 'AAA', 'BBB', 'CCC'],

datas: [

{

dataS: [14, 15, 16, 17],

'bbb 222222': {

series: ['人文社区', '汽车', '美食', '美景'],

datas: [

{

series: ['下载量', '浏览量', '评论'],

data: ['133', '122', '13'],

{

series: ['下载量', '浏览量', '评论'],

data: ['33', '22', '12'],

{

series: ['下载量', '浏览量', '评论'],

data: ['13', '12', '12'],

{

series: ['下载量', '浏览量', '评论'],

data: ['333', '522', '10'],

browsers: {

series: ['ABC', 'AAA', 'BBB', 'CCC'],

datas: [

{

dataS: [14, 15, 16, 17],

'ccc 333333': {

series: ['人文社区', '明星', '美食', '美景'],

datas: [

{

series: ['下载量', '浏览量'],

data: ['133', '122'],

{

series: ['下载量', '浏览量'],

data: ['33', '22'],

{

series: ['下载量', '浏览量'],

data: ['13', '12'],

{

series: ['下载量', '浏览量'],

data: ['33', '22', '2'],

browsers: {

series: ['ABC', 'AAA', 'BBB', 'CCC'],

datas: [

{

dataS: [14, 15, 16, 17],

});

}, 300);

});

//缓存key到内存里面方便搜索调用

hashKey(data) {

Object.keys(data).forEach((v) => {

let sp = v.split(' ');

this.list_1.push({ label: sp[0], value: sp[0] });

this.list_2.push({ label: sp[1], value: sp[1] });

});

//名称搜索提示

search_1(str, cb) {

let res = str ? this.list_1.filter((item) => ~item.value.toLowerCase().indexOf(str.toLowerCase())) : this.list_1;

cb(res); // 调用 callback 返回建议列表的数据

search_2(str, cb) {

let res = str ? this.list_2.filter((item) => ~item.value.toLowerCase().indexOf(str.toLowerCase())) : this.list_2;

cb(res); // 调用 callback 返回建议列表的数据

//初始化echarts绘图的dom

initChart() {

this.myChart_1 = echarts.init(this.$refs.myChart_1);

this.myChart_2 = echarts.init(this.$refs.myChart_2);

//获取到的data进行绘图

drawChart_1() {

let data = this.data[this.selected_key];

let chartData = []; //图表数据

let seriesName = data.datas[0].series; //各个series的名字

//转换一下数据

data.series.forEach((v, i) => {

chartData.push([v, ...data.datas[i].data]);

});

let series = [

{

type: 'bar',

itemStyle: {

color: '#00a3eb',

{

type: 'bar',

itemStyle: {

color: '#23af4c',

barGap: 0,

];

//三个列的情况

if (chartData[0].length === 4) {

series.push({

type: 'bar',

itemStyle: {

color: '#fef303',

});

}

//echarts 配置项

let option = {

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'cross',

crossStyle: {

color: '#999',

legend: {

data: seriesName,

bottom: 0,

xAxis: [

{

type: 'category',

axisPointer: {

type: 'shadow',

yAxis: {

type: 'value',

dataset: {

sourceHeader: false,

source: chartData,

series: series,

};

//绘图

this.myChart_1.setOption(option, true);

//自适应

window.onresize = () => {

this.myChart_1.resize();

};

//绘制饼图

drawChart_2() {

let data = this.data[this.selected_key].browsers;

let chartData = []; //图表数据

//转换一下数据

data.series.forEach((v, i) => {

chartData.push({

value: data.datas[0].dataS[i],

});

//echarts 配置项

let option = {

tooltip: {

trigger: 'item',

legend: {

data: data.series,

bottom: 0,

series: [

{

type: 'pie',

radius: '50%',

data: chartData,

label: {

formatter: '{b}: {d}%',

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)',

};

//绘图

this.myChart_2.setOption(option, true);

//自适应

window.onresize = () => {

this.myChart_2.resize();

};

//重新绘制数据

changeData() {

if (this.select_1 === '') {

this.$message.error('请输入名称');

return;

}

if (this.select_2 === '') {

this.$message.error('请输入名字');

return;

}

this.selected_key = this.select_1 + ' ' + this.select_2;

if (!(this.selected_key in this.data)) {

this.$message.error(this.selected_key + '查询数据失败');

return;

}

this.drawChart_1();

this.drawChart_2();

mounted() {

this.initChart();

this.getData().then((e) => {

this.data = e;

this.hashKey(e);

//初始化显示第一个人的数据

this.selected_key = 'aaa 111111';

this.drawChart_1();

this.drawChart_2();

});

};

</script>

<style>

.chart {

margin: 20px auto;

width: 80%;

height: 600px;

}

.main {

display: flex;

width: 100%;

gap: 10px;

margin-top: 80px;

}

.main > div {

width: calc(50%);

}

</style>

码者_荣耀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学废了吗_搜索结果对应不同图表

<template> <div> <div class="main"> <div style="text-align: center"> <el-autocomplete v-model="state_1" :fetch-suggestions="search_1" placeholder="请输入名称" @select="(e) => (select_1 = e.value)"></...
复制链接

扫一扫