echarts商品数据分析

图表的绘制应该是技术中的一个常用点，我在之前制作小站的时候就想着用图表将每日、每天、每周每月的UV绘制成图表，当时是做了一个柱状图用数组取最后7个数据做了个每周访客图。今天在这边好好的系统记录一下个别操作和流程，以后方便自己cv，嘿嘿~

一.依赖安装

npm install echarts
npm install vue-echarts

二.全局安装

在main.js中引用

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import ECharts from 'vue-echarts'
import "echarts"
const app = createApp(App)
//在vue中挂载ECharts；1.在vue中挂载ECharts；2.挂载的组件
app.component('EChart',ECharts)
app.use(createPinia())
app.use(router)

app.mount('#app')

三.定义组件

在components下添加echartview.vue文件作为echarts组件

这个组件较为简单。父组件可添加option对象来直接生成echarts图表

<template>
  <div>
    <e-charts id="main" class="chart" :option="props.option" />
  </div>
</template>
 
<script setup lang="ts">
  import * as echarts from 'echarts';
  import { onMounted } from 'vue';
  /** 接受父组件传来的值  */
  const props = defineProps({
    option: {
      type: Object,
      require: true
    }
  });
 
  onMounted(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    props.option && myChart.setOption(props.option);
  });
</script>
 
<style scoped>
  .chart {
    width: 600px;
    height: 400px;
  }
</style>

四.调用组件生成图表

<template>1
<div>
  <echartsview :option="optionPost"></echartsview>
</div>
</template>
<script setup lang="ts">
import echartsview from '@/components/echartsview.vue'
const dataPost = [
    { value: 1048, name: '前端程序员' },
    { value: 735, name: '西式餐饮服务员帮工' },
    { value: 580, name: '宴席服务帮工' },
    { value: 484, name: '宴会服务帮工' },
    { value: 300, name: '礼宾员-门童零工' },
    { value: 300, name: '中餐饮大厅服务帮工' },
    { value: 300, name: '厨房帮工' },
    { value: 300, name: '洗衣房帮工' },
  ]

  const optionPost = {
    title: {
      text: '岗位分类',
      bottom: '0',
      left: 'center',
    },
    tooltip: {
      trigger:'item'
    },
    legend: { 
      orient: 'vertical',
      right: 10,
      y: 'center',
      icon: 'circle',
      formatter: (name : any) => {
        let total = 0
        let target
        for (let i = 0; i < dataPost.length; i++) {
          total += dataPost[i].value
          if (dataPost[i].name === name) {
            target = dataPost[i].value
            console.log(target)
          }
        }
        const arr = [
          '{a|' + name + '}',
          '{b|' + target + '}',
          '{c|' + ((target / total) * 100).toFixed(2) + '%}'
        ]
        return arr.join('  ')
      },
      textStyle: {
        padding: [10, 0, 0, 0],
        rich: {
          a: {
            fontSize: 15,
            width: 135
          },
          b: {
            fontSize: 15,
            width: 50,
          },
          c: {
            fontSize: 15,
            color: '#c1c1c1'
          },
        }
      }
    },
    series: [
      {
        name: '岗位来源分类',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['25%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: dataPost
      }
    ]
  }
</script>

cv一下一分钟不到就能出个图，感觉自己又行了，嘿嘿~

但是要掌握一个组件，只会cv还是不够的，还是得对代码做一个解读来适应以后得使用场景，比如我想要看趋势的时候，我要用的就是折线图，有时候又要用柱状图，我觉得这个图很丑，想要改一下布局什么的。

所以这边来看一下代码：

宏观：粗略看原理就是将一个对象导入了echarts组件，调用其setOption方法就可以生成图表。简单步骤为1.获取dom元素 2.echarts.init(dom)初始化dom元素 3.调用setOption生成图表

<e-charts id="main" class="chart" :option="props.option" />

  onMounted(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    props.option && myChart.setOption(props.option);
  });

当然知道这个还是不够的。再看一下option：

可以看到option里面还有很多个对象，比如title、tooltip、legend、series每个对象里面还有很多个参数，看到这里，我已经不想看了，想去看看庆余年2缓解一下脑子，嘿嘿~

但是还是研究完后奖励自己下吧，这时候还是打开文档看看吧~（文档路径在文章结尾）

1.title

文中用了text、bottom、left三个参数，但其实他还有很多的参数，以下是稍微使用的实例，

title: {
      text: '岗位分类\n帅帅',
      bottom: '0',
      left: 'center',
      textStyle: {
      fontSize: 20,
      color: "rgba(255, 255, 255, 1)",
      textBorderColor: "rgba(0, 81, 255, 1)",
      textBorderWidth: 2.5
    },
    }

文字可以使用\n分行。并且给他增加了一个外边框和边框厚度~title还是比较好理解的，text就是title文本。button和left就是和底部的距离，左右距离。

2.tooltip

我用注释法看了下猜测是鼠标悬浮各项的小信息展示的控制，这边来看下文档说明

文档说明为提示组件框，

当前为饼图，所以设置为item。以后做折线的话应该就是axis咯~

3.legend（图例组件）

orient：horizontal || vertical为图例的朝向 文中为vertical垂直分布

right：距离右侧的距离

icon：图例的icon，有种类'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

formatter：用来格式化图例文本，支持字符串模板和回调函数两种形式。

textStyle:和title差不多意思，在rich中可以自定义富文本样式，

4.series

有很多的type表示各种的图样，

center为圆心坐标。相对于容器的宽、高

radius为半径，内半径和外半径。这个好像有点抽象，这是根据容器的短边来的，一般应该是宽，外半径100%，即填满容器宽度，内外半径你设置的一样的话就没了。

读了那么多，差不多可以融会贯通 举一反三 三顾茅庐 一下了。

基于当前的数据和组件，看文档绘制一个柱状图

文档如下

可以得到柱状图

const dataPost = [
    { value: 1048, name: '前端程序员' },
    { value: 735, name: '西式餐饮服务员帮工' },
    { value: 580, name: '宴席服务帮工1' },
    { value: 484, name: '宴会服务帮工2' },
    { value: 400, name: '礼宾员-门童零工' },
    { value: 500, name: '中餐饮大厅服务帮工' },
    { value: 600, name: '厨房帮工' },
    { value: 700, name: '洗衣房帮工' },
  ]
const ydata=dataPost.map(item=>
  item.value
)
const xdata=dataPost.map(item=>
   item.name
)
console.log(xdata)
  const optionPost = {
    //标题
    title: {
      text: '岗位分类',
      bottom: '0',
      left: 'center',
      textStyle: {
      fontSize: 20,
      color: "rgba(255, 255, 255, 1)",
      textBorderColor: "rgba(0, 81, 255, 1)",
      textBorderWidth: 2
    },
  },
    tooltip: {
      trigger:'axis'
    },
    xAxis: {
    data:xdata,
  },
  grid: {
    right: "0%",
    width: "100%"
  },
  yAxis: {},
  series: [{
    name: "岗位人数",
    type: "bar",
    data: ydata,
    label: {
      show: true
    },
    showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
  }]
  }

再比如折线图

const dataPost = [
    { value: 1048, name: 'name1' },
    { value: 735, name: 'name2' },
    { value: 580, name: 'name3' },
    { value: 484, name: 'name4' },
    { value: 400, name: 'name5' },
    { value: 500, name: 'name6' },
    { value: 600, name: 'name7' },
    { value: 700, name: 'name8' },
  ]
const ydata=dataPost.map(item=>
  item.value
)
const xdata=dataPost.map(item=>
   item.name
)
const optionPost = {
  xAxis: {
    type: "category",
    data: xdata
  },
  yAxis: {},
  series: [{
    data: ydata,
    type: "line",
    label: {
      show: true,
      distance: 7,
      color: "rgba(255, 255, 255, 1)",
      fontWeight: "bold",
      fontSize: 9,
      textBorderColor: "rgba(0, 0, 0, 1)",
      textBorderWidth: 2
    }
  }]
}