vue3中，vue-echarts基本使用（柱状图、饼图、折线图）_vue3.0+typescript+element-plus echarts折线图

注意：vue-echarts在使用前要先安装echarts，不要只安装vue-echarts这一个

echarts官网地址：Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

安装vue-echarts

npm i -S vue-echarts echarts
 
//cnpm 安装
cnpm i -S vue-echarts echarts

注意：Vue 2 下使用 vue-echarts，必须还要安装 @vue/composition-api ：

npm i -D @vue/composition-api
//cnpm 安装
cnpm i -D @vue/composition-api

main.js中全局注册组件

import Echarts from "vue-echarts"
import * as echarts from "echarts"
 
app.component("v-chart", Echarts)
 
app.config.globalProperties.$echarts = echarts

自适应屏幕

方式1：autoresize:true  【推荐】

该方式自适应需满足两个条件：

• 加上autoresize属性。
• 图表外层需要指定vw单位的宽度，如width：100vw;

 
<template>
    <div style="width:100vw">
      <v-chart autoresize :option="option_column" style="height: 400px"></v-chart>
    </div>
</template>

基本使用  

• 柱状态

<template>
    <v-chart ref="mychart1" class="chart" :option="optionBar"></v-chart>
</template>
 
<script setup>
    import { onMounted, reactive, watch, ref, onBeforeUnmount, shallowRef } from 'vue'
 
    // 渲染数
    mychart1.value.setOption(renderLineOptions())
 
    // 定义属性
    const mychart1 = ref(null)
    const optionBar = ref(null)
 
    // 坐标轴及其属性定义
    const renderLineOptions = () => {
        return {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '8%',
                containLabel: true
            },
            xAxis: {
                data: data.chartName, // x轴的标题（定义的变量），可以是直接的数组["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 15// 字体大小
                    }
                },
                axisLabel: {
                    show: true,
                rotate: 30    // 设置x轴标签旋转角度
                }
            },
            yAxis: {
                name: '工时/h',
                nameTextStyle: {
                    nameLocation: 'start'
                },
                axisLabel: {
                    show: true,
                    fontSize: 16
                },
                axisLine: {
                    show: true, // 是否显示Y轴线
                    lineStyle: {
                        width: 1, // 线的大小
                        type: 'solid' // Y轴线的类型
                    }
                }
            },
            series: [
                {
                    // 渲染的数据，可以使用 [5, 20, 36, 10, 10, 20]，也可以是定义的变量（记得赋值）
                    data: data.chartRows, 
                    type: 'bar',
                    barWidth: '20%',
                    itemStyle: {
                        // 通常情况下：
                        color: function (params) {
                            // 每根柱子的颜色
                            return data.colorList[params.dataIndex]
                        },
                        offset: 6 // 偏移量
                    },
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 14,
                        formatter: (params) => {
                            const reData = (params.data || 0).toString().replace(/(\d)(?=(?:\d{3}) + $)/g, '$1,')
                            return reData
                        }
                    }
                }
            ]
        }
    }
 
</script>

• 饼图 

  <template>
      <v-chart ref="mychart1" class="chart" :option="optionPie "></v-chart>
  </template>
   
  <script setup>
      import { onMounted, reactive, watch, ref, onBeforeUnmount, shallowRef } from 'vue'
   
  //饼图的数据格式对应的是key:value的形式
  // data.pieNumber = [
  //     { value:1, name: "开发" },
  //     { value:2, name: "维护" },
  //     { value:3, name: "测试" },
  //     { value:4, name: "BUG修复" },
  //     { value:5, name: "其他" }
  // ]
      // 渲染数
      mychart1.value.setOption(renderPieOptions ())
   
      // 定义属性
      const mychart1 = ref(null)
      const optionPie = ref(null)
   
      const renderPieOptions = () => {
          return {
              tooltip: {
                  trigger: "item",
                  formatter: "{a} <br/>{b} : {c} 个,占比： ({d}%)"
              },
              legend: {
                  orient: "vertical",
                  position: 'right',
                  right: '2%',
                  top: '20%',
                  data: data.pieTitle //这里的渲染的数据需要与series里面渲染的数据中的name保持一致
              },
              series: [
                  {
                      name: "任务类型占比分析表",
                      type: "pie",
                      radius: "70%",
                      center: ["45%", "55%"],
                      data: data.pieNumber, //渲染的数据
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: "rgba(0, 0, 0, 0.5)"
                          }    
                      },
                      label: {
                          show: true, // 显示标签
                          formatter: '{b}个数占比：{d}%'
                      }
                  }
              ]
          }
      }
   
  </script>
  

  

•  折线图

      xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
      }]
  

  

设置y、x轴步长、最大值、最小值

xAxis: {
        name:'天',
        type: 'value',
        interval:5, // 步长
        min:10, // 起始
        max:50 // 终止
    },
yAxis: {
    name:'合同个数',
    type: 'value',
    interval:1, // 步长
    min:0, // 起始
    max:5 // 终止
},

配置样式 

• 官网样式：主题下载 - Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/download-theme.html
• 如：macarons、dark  、vintage、infographic、shine、roma