searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

VUE3中echarts组件重复使用问题

2023-08-28 07:17:57
28
0

(1)引入echarts组件库

import * as echarts from 'echarts'

(2)在setup()中定义绘制的内容
1、定义绘制函数drawchart()
2、通过document.getElementById('flod-operator')获取到'flod-operator'的DOM节点,此时获取到的是一整个DOM树。

setup(){

      
      const drawchart = () =>{
       
        let myChart = echarts.init(document.getElementById('flod-operator'));

        
  // 绘制图表
            myChart.setOption({
                xAxis: {
                data: [1,2,3,4,5,6,7,8,9,10],
                axisTick: {
                        show: false, //不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false, //不显示坐标轴线
                    },
                    type: "category",
                },
                yAxis:{
                type: 'value',
                max:1,
                min:0,
                // splitNumber: 5,
                axisLabel: { //坐标文字
                    color: '#151515',
                    formatter: function (value) {
                        return `${value}C`;
                    }
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: false, //不显示坐标轴线
                },
                splitLine: {
                                lineStyle: {  //y轴分隔线样式设置
                                    color: '#E2E5ED',   //颜色
                                    type: '', //虚线
                                    opacity: 1,
                                }
                            }
                },
                grid: {
                    top:'10%',
                    left: '3%', //默认10%
                    right: '4%', //默认10%
                    bottom: '8%', //默认60
                    containLabel: true
                    //grid区域是否包含坐标轴的刻度标签
                },
                series: [
                {
                    name: "用户量",
                    type: "line",
                    data: [1,2,3,4,5,6,7,8,9,10],
                    symbolSize: 0
                }
                ]
            })
            
      }
        
    }

(3)vue3对echarts复用时会出现,只绘制了一张折线图的问题,该问题的出现是因为没有对dom的id进行分别。只需对dom上组件进行id的动态配置即可解决。

<fold-line :data_x="data_x" :data_y="data_y" :item="0"></fold-line>
传入item变量对折线图进行控制
 
0条评论
0 / 1000
w****n
4文章数
0粉丝数
w****n
4 文章 | 0 粉丝
w****n
4文章数
0粉丝数
w****n
4 文章 | 0 粉丝
原创

VUE3中echarts组件重复使用问题

2023-08-28 07:17:57
28
0

(1)引入echarts组件库

import * as echarts from 'echarts'

(2)在setup()中定义绘制的内容
1、定义绘制函数drawchart()
2、通过document.getElementById('flod-operator')获取到'flod-operator'的DOM节点,此时获取到的是一整个DOM树。

setup(){

      
      const drawchart = () =>{
       
        let myChart = echarts.init(document.getElementById('flod-operator'));

        
  // 绘制图表
            myChart.setOption({
                xAxis: {
                data: [1,2,3,4,5,6,7,8,9,10],
                axisTick: {
                        show: false, //不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false, //不显示坐标轴线
                    },
                    type: "category",
                },
                yAxis:{
                type: 'value',
                max:1,
                min:0,
                // splitNumber: 5,
                axisLabel: { //坐标文字
                    color: '#151515',
                    formatter: function (value) {
                        return `${value}C`;
                    }
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: false, //不显示坐标轴线
                },
                splitLine: {
                                lineStyle: {  //y轴分隔线样式设置
                                    color: '#E2E5ED',   //颜色
                                    type: '', //虚线
                                    opacity: 1,
                                }
                            }
                },
                grid: {
                    top:'10%',
                    left: '3%', //默认10%
                    right: '4%', //默认10%
                    bottom: '8%', //默认60
                    containLabel: true
                    //grid区域是否包含坐标轴的刻度标签
                },
                series: [
                {
                    name: "用户量",
                    type: "line",
                    data: [1,2,3,4,5,6,7,8,9,10],
                    symbolSize: 0
                }
                ]
            })
            
      }
        
    }

(3)vue3对echarts复用时会出现,只绘制了一张折线图的问题,该问题的出现是因为没有对dom的id进行分别。只需对dom上组件进行id的动态配置即可解决。

<fold-line :data_x="data_x" :data_y="data_y" :item="0"></fold-line>
传入item变量对折线图进行控制
 
文章来自个人专栏
vue3前端
4 文章 | 1 订阅
0条评论
0 / 1000
请输入你的评论
0
0