Vue进阶之Vue项目实战（三）

news2024/10/5 14:36:05

Vue项目实战

图表渲染
- 安装echarts
- 图表渲染器(图表组件)
- - 图表举例：
  - - 创建 ChartsRenderer.vue
    - 创建 ChartsDataTransformer.ts
- 基于 zrender 开发可视化物料
- - 安装 zrender
  - 画一个矩形
  - 画一个柱状图
- 基于svg开发可视化物料
- - svg小示例
  - 使用d3进行图表渲染
  - - 安装d3
    - 基本使用
    - 地图绘制
- 本地持久化
- 拓展知识

图表渲染

安装echarts

package.json:

"dependencies": {
   
    "vue": "3.4.26",
    "vue-echarts":"6.7.1",
    "echarts":"5.5.0"
  },

图表渲染器(图表组件)

一般负责：

整体图表的基础层数据协议设计

schema:{
   
	type:"line",  //折线图
	data:{
   
		labels:[],
		datasets:[]
	}
}

基于数据协议的图表渲染逻辑
渲染逻辑：通用渲染逻辑、特殊渲染逻辑
BarRenderer.vue、LineRenderer.vue，统一在ChartsRenderer.vue中进行分发渲染（在这一层将不同的图表类型差异磨平）
图表的事件处理

图表举例：

创建 ChartsRenderer.vue

components
- ChartsRenderer.vue

<template>
 <!-- 一个的写法 -->
 <div class="charts-container" ref="container">charts Renderer</div>
 <!-- 多个的写法 -->
 <!-- <div :ref="(n)=>maps.n=n">charts Renderer1</div>
 <div :ref="(b)=>maps.b=b">charts Renderer2</div>
 <div :ref="(r)=>maps.r=r">charts Renderer3</div> -->
</template>

<script setup lang="ts">
import {
     use,init} from 'echarts'
import {
     BarChart,LineChart} from 'echarts/charts'
import {
     LegendComponent,TooltipComponent} from 'echarts/components';
import {
     onMounted,ref} from 'vue'

use([BarChart,LineChart,LegendComponent,TooltipComponent])

const container=ref<HTMLDivElement|null>(null)
// 多个的写法
// const maps={}


onMounted(()=>{
     
  if(!container.value) return;
  const chartInstance= init(container.value)
  console.log("container",container);
  // 多个的写法
  // console.log("maps",maps);
  chartInstance.setOption({
     
    title:{
     
      text:"Echarts 入门示例"
    },
    tooltip:{
     },
    legend:{
     
      data:['销量']
    },
    xAxis:{
     
      data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    yAxis:{
     },
    series:[
      {
     
        name:"销量",
        type:"bar",
        data:[5,20,36,10,10,20]
      }
    ]
  })
})
</script>


<style scoped>
.charts-container{
     
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>

App.vue

<script setup lang="ts">
import ChartsRenderer from './components/ChartsRenderer.vue'
</script>
<template>
  <ChartsRenderer></ChartsRenderer>
</template>

请添加图片描述
项目中：

import {
   use,init,graphic} from 'echarts'
.......
chartInstance.setOption({
   
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
   
    text: '渐变堆叠面积图'
  },
  tooltip: {
   
    trigger: 'axis',
    axisPointer: {
   
      type: 'cross',
      label: {
   
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
   
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
  },
  toolbox: {
   
    feature: {
   
      saveAsImage: {
   }
    }
  },
  grid: {
   
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
   
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
   
      type: 'value'
    }
  ],
  series: [
    {
   
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
   
        width: 0
      },
      showSymbol: false,
      areaStyle: {
   
        opacity: 0.8,
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
   
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
   
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
   
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
   
      name: 'Line 2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
   
        width: 0
      },
      showSymbol: false,
      areaStyle: {
   
        opacity: 0.8,
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
   
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
   
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
   
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
   
      name: 'Line 3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
   
        width: 0
      },
      showSymbol: false