精华内容
下载资源
问答
  • vue3使用echarts
    千次阅读
    2022-08-16 11:54:09

    本地安装Echarts

    npm install echarts --save
     
    有淘宝镜像的可以选择  (安装速度快)
    cnpm install echarts --save
    

    新建一个echarts.js文件

    // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from "echarts/core";
     
    /** 引入柱状图and折线图图表,图表后缀都为 Chart  */
    import { BarChart, LineChart } from "echarts/charts";
     
    // 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
    import {
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
    } from "echarts/components";
     
    // 标签自动布局,全局过渡动画等特性
    import { LabelLayout, UniversalTransition } from "echarts/features";
     
    // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    import { CanvasRenderer } from "echarts/renderers";
     
    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer,
      LineChart,
    ]);
     
    // 导出
    export default echarts;
    

    创建好的js文件全局引入到main.js内

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from "./router/index"
    
    import echarts from './utils/echarts';
    
    const app = createApp(App)
    
    app.config.globalProperties.$echarts = echarts
    
    app.use(router)
    app.use(pinia)
    
    app.mount('#app')
    

    这里需要注意:(组件名大写首字母)
    按需引入时:import { LineChart } from “echarts/charts” 

    <script setup>逻辑内使用echart

    因为setup中没有this,而且这时候还没有渲染.所以,在setup中,也可以使用provide/inject把echarts引入进来.  在根组件里引入echarts

    // App.vue文件内插入生产者provide 
    
    <script setup>
    import * as echarts from "echarts";
    import { provide } from "vue";
    provide("echarts", echarts);
    </script>
    
    <template>
      <router-view></router-view>
    </template>
    
    <style>
    body {
      margin: 0px;
    }
    </style>
    

    在需要的页面中inject

    <template>
      <div>
        <div id="main"></div>
        <div id="maychar"></div>
      </div>
    </template>
     
    <script lang="js">
    import { defineComponent, onMounted, inject } from "vue"; // 主要
    export default defineComponent({
      setup() {
        onMounted(() => {
          change();
          changetype();
        });
        let echarts = inject("echarts"); // 主要
        // 基本柱形图
        const change = () => {
          const chartBox = echarts.init(document.getElementById("main")); // 主要
          const option = {
            xAxis: {
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {},
            series: [
              {
                type: "bar",
                data: [23, 24, 18, 25, 27, 28, 25],
              },
            ],
          };
          chartBox.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener("resize", function () {
            chartBox.resize();
          });
        };
        // 折线图
        const changetype = () => {
          // 获取组件实例
          const machart = echarts.init(document.getElementById("maychar"));
          // 设置配置项
          const option = {
            xAxis: {
              data: ["A", "B", "C", "D", "E"],
            },
            yAxis: {},
            series: [
              {
                data: [10, 22, 28, 43, 49],
                type: "line",
                stack: "x",
              },
              {
                data: [5, 4, 3, 5, 10],
                type: "line",
                stack: "x",
              },
            ],
          };
          // 复制
          machart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener("resize", function () {
            machart.resize();
          });
        };
        return {
          changetype,
        };
      },
    });
    </script>
     
    <style lang="scss" scoped>
    #main {
      min-width: 31.25rem;
      min-height: 31.25rem;
      // max-height: 500px;
    }
    
    #maychar {
      max-height: 500px;
      // max-height: 400px;
      height: 500px;
    }
    </style>
    

    达到统一管理引入的echarts效果

    更多相关内容
  • Vue3 使用 Echarts

    千次阅读 2022-04-21 15:46:05
    第一种方法 // 下载echarts npm i echarts -S <template> <div id="main" style="width: 600px; height: 400px">...import * as echarts from 'echarts' // 使用echarts export default {

    第一种方法

    // 下载echarts
    npm i echarts -S
    
    <template>
      <div id="main" style="width: 600px; height: 400px"></div>
    </template>
    
    <script>
    import { onMounted } from 'vue'
    import * as echarts from 'echarts' // 使用echarts
    export default {
      setup(props, ctx) {
        onMounted(() => {
          var myChart = echarts.init(document.getElementById('main'))
          var option = {
            title: {
              text: 'ECharts 入门示例',
            },
            tooltip: {},
            legend: {
              data: ['销量'],
            },
            xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
              },
            ],
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)
        })
      },
    }
    </script>
    

    第二种方法

    // 在main.js中引入
    // 将echarts 挂载到Vue3原型
    import * as echarts from 'echarts' 
    const app = createApp(App)
    // 全局方法
    app.config.globalProperties.$echarts = echarts
    app.use(router).use(store)
    app.mount('#app')
    
    <template>
      <div id="main" style="width: 600px; height: 400px"></div>
    </template>
    
    <script>
    import { onMounted, getCurrentInstance } from 'vue'
    export default {
      setup(props, ctx) {
        onMounted(() => {
          const { proxy } = getCurrentInstance() 
          var myChart = proxy.$echarts.init(document.getElementById('main'))
          var option = {
            title: {
              text: 'ECharts 入门示例',
            },
            tooltip: {},
            legend: {
              data: ['销量'],
            },
            xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
              },
            ],
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)
        })
      },
    }
    </script>
    

    这里最重要的是import * as echarts from ‘echarts’, 不能 import echarts from ‘echarts’,这样会报错,因为5,0版本的echarts的接口已经变成了下面这样

    export { EChartsFullOption as EChartsOption, connect, disConnect, dispose, getInstanceByDom, getInstanceById, getMap, init, registerLocale, registerMap, registerTheme };
    
    展开全文
  • vue3使用ECharts

    千次阅读 2022-04-22 14:59:35
    示例单个组件内使用:(需要全局注册的根据es6写法自行引入全局) 版本: "echarts": "^5.2.0", ...// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。 import * as echarts from 'echarts/cor
    直接参考官网[ECharts](https://echarts.apache.org/handbook/zh/basics/import)
    示例单个组件按需引入使用:(需要全局注册的根据es6写法自行引入全局)
    版本: "echarts": "^5.2.0",
    <template>
      <!-- h5页面显示 -->
      <div id="echart-box"></div>
    </template>
    <script>
    // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from 'echarts/core';
    // 引入柱状图图表,图表后缀都为 Chart
    import { BarChart, LineChart } from 'echarts/charts';
    // 引入提示框,标题,直角坐标系组件,组件后缀都为 Component
    import {
      TooltipComponent,
      TitleComponent,
      GridComponent
    } from 'echarts/components';
    // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    import { CanvasRenderer } from 'echarts/renderers';
    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      BarChart,
      LineChart,
      CanvasRenderer
    ]);
    import { onMounted, reactive } from 'vue';
    
    setup(){
    	// 图标的参数信息 可查询官网看例子  或者可以直接复制官网的option过来直接展示
        let option = reactive({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            name: '星期几'
          },
          yAxis: [
            {
              type: 'value',
              name: 'test'
              // 百分比显示y轴
              // min: 0,
              // max: 100,
              // axisLabel: {
              //   formatter: '{value} %'
              // }
            },
            {
              type: 'value',
              name: 'test'
              // 百分比显示y轴
              // min: 0,
              // max: 100,
              // axisLabel: {
              //   formatter: '{value} %'
              // }
            }
          ],
          series: [
            {
              // 在 ECharts 中,我们使用字符串 '-' 表示空数据
              data: [10, 10, '-', 15, 10, 5, 35],
              type: 'line' // bar 柱形图  line 折线图
              // smooth: true // 平滑曲线
            }
          ],
          title: {
            text: '测试echart(标题)',
            // subtext: '子标题',
            textStyle: {
              fontSize: 22,
              fontWeight: 'bold', //样式
              color: 'red'
            },
            subtextStyle: {
              fontSize: 16,
              color: '#000'
            }
          },
          //提示框取默认值,即鼠标移动到柱状图会显示内容
          tooltip: {
            trigger: 'axis', //触发类型;轴触发,axis则鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据,
            axisPointer: {
              type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
              lineStyle: {
                color: 'red'
              }
            }
          }
        });
       onMounted(() => {
          // 接下来的使用,初始化图表,设置配置项
          let echartBox = document.getElementById('echart-box');
          let myChart = echarts.init(echartBox);
          myChart.setOption(option);
          // 绑定事件 都是小写
          myChart.on('click', function (params) {
            // 控制台打印数据的名称
            console.log(params);
          });
        });
        return {};
    }
    </script>
    
    展开全文
  • vue3 使用echarts

    千次阅读 2021-05-07 21:39:27
    vue页面使用 <template> <div id="myChart123" :style="{width: '1500px', height: '550px'}"></div> </template> <script> // 引入echarts import * as echarts from 'echarts' ...

    效果图

    在这里插入图片描述

    安装Echarts

    cnpm install echarts --save
    

    vue页面使用

    <template>
      <div id="myChart123" :style="{width: '1500px', height: '550px'}"></div>
    </template>
    
    <script>
    // 引入echarts
    import * as echarts from 'echarts'
    import {onMounted} from "vue";
    
    export default {
      setup() {
        onMounted(() => { // 需要获取到element,所以是onMounted的Hook
          let myChart = echarts.init(document.getElementById("myChart123"));
          // 绘制图表
          myChart.setOption({
            xAxis: {
              data: ["4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"]
            },
            yAxis:{},
            series: [
              {
                name: "用户量",
                type: "line",
                data: [8, 15, 31, 13, 15, 22, 11]
              }
            ]
          });
          window.onresize = function () { // 自适应大小
            myChart.resize();
          };
        });
      }
    }
    </script>
    
    
    展开全文
  • vue3使用echarts并封装echarts组件

    千次阅读 2022-03-18 21:24:34
    vue3使用echarts并封装echart组件前言:一、安装并导入echart1.npm下载包2.配置echarts二、使用echarts三、封装echarts为组件 前言: 本文使用的echarts版本为5.3.1,详细文档可见: Echarts 官方文档 文中案例...
  • Vue2 main.js import Vue from 'vue';...Vue.prototype.$echarts = echarts; Echarts.vue组件 <template> <div id="container" :style="{ width: '300px', height: '300px' }"></div&
  • Vue3使用echarts教程

    千次阅读 2022-05-04 22:34:46
    Echars官网 ...二、使用echarts 1. 编辑Vue页面 import * as echarts from "echarts"; 2.增加Div标签 <div id="questionStatus" class="questionStatus"></div> 3.渲染数据 expo..
  • Vue3使用Echarts图表

    千次阅读 2021-11-09 08:43:08
    Vue3使用Echarts图表 前言: Vue3使用Echarts图表基本可以按照Echarts官网的描述来使用,这里是按照自己的方式做了一些简化和常规性的叙述,主要分为以下几步来完成: 第一步: 安装 npm install echarts --save 第...
  • vue3使用echarts5

    2022-02-18 14:50:50
    <template> <div id="echarts168" :style="{width: nwidth+'%', height: nheight+'px'}"></div> </template>...import {onMounted, defineComponent, nextTick } from 'vue' const pr
  • echarts使用echarts中图例以及tooltip过多、x轴文本过长处理;路由切换再回来Echart图表消失问题;监听父元素chartbox的宽 自适应echarts的resize
  • 安装 从 npm 获取 npm install echarts --save 在对应的.vue文件中引用 ECharts ...百度到的Vue引入文章基本上都是使用全局Vue.prototype.$echarts = echarts。关于这个语句的解释可以看这篇博客
  • vue3使用echarts时报错 报错原因应该是ts认为有可能获取不到chartDom 使用!排除chartDom为null或undefined的情况即可
  • vue3 使用echarts——折线图

    千次阅读 2021-11-18 00:21:07
    vue3 使用echarts——折线图 效果 使用流程 1、安包 cnpm install echarts --save 2、页面使用 index.vue <template> <div id="myChart123" :style="{width: '1500px', height: '550px'}"></div&...
  • vue3封住echarts组件,包含自适应屏幕,代码可复用
  • vue3 使用echarts和百度地图

    千次阅读 2021-11-30 21:40:02
    vue3.0 使用echarts和百度地图进行地图展示,自定义标注和自定义信息窗口,infoBox,infoWindow
  • vue3 使用 ECharts5

    2021-07-31 10:33:45
    ECharts官方文档:ECharts5 查看配置项:setOption <div class="Echarts"> <div id="main" style="width: 100%; height: 400px"></div> </div> <script> import * as echarts ...
  • vue使用echarts制作圆环图,代码如下所示: <div id=main></div> [removed] export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts:...
  • 主要介绍了Vue使用echarts的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • Vue3使用Echarts和dataV地图模块
  • 主要给大家介绍了关于如何在Vue使用Echarts实例图的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue3使用echarts

    千次阅读 2022-07-05 11:48:06
    vue3 中按需引入 echarts5
  • vue3-echarts5:vue3 + echarts5
  • <template> <div ref="chart" style="width: 2500px;height:860px;"></div> ...import { ref, onMounted } ...import * as echarts from 'echarts'; import chinaMap from '@/assets/json/china.json'
  • Vue3/ECharts5数据可视化(大屏展示)项目案例源码,一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化(大屏展示)项目。此项目使用'.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,全局...
  • Vue3使用Echarts

    千次阅读 2022-03-28 22:38:52
    使用方式一 <script lang="ts" setup> import { ref, onMounted } from "vue"; // 按需引入 echarts import * as echarts from "echarts"; onMounted( () => { init() } ) function init() { // 基于...
  • 进入后下面会有一个说明文档,点击中文版的说明文档,找到【安装和使用】一栏,安装vue echarts工具包,下面是安装方式。安装完成后去github上搜索vue echarts,找到stars最高的那个,点击进入。为了更小的打包体积...
  • vue3使用echarts

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,697
精华内容 13,078
关键字:

vue3使用echarts