精华内容
下载资源
问答
  • 代码 <template> <div id="project-overview"> <div class="Chart_one" id="myChartCurveb"> </div> </div> </template> <script>... }...

     代码


    <template>
      <div id="project-overview">
        
            <div class="Chart_one" id="myChartCurveb">
         
            </div>
    
      </div>
    </template>
    
    <script>
    export default {
      mounted() {
        this.drawLine()
      },
      methods: {
        drawLine() {
          let myChart = this.$echarts.init(document.getElementById('myChartCurveb'))
          let options = {
            legend: {
             // 图例的位置 
              bottom: '0px',
              textStyle: {
                fontSize: '12',
                color: '#fff'
              }
            },
            tooltip: {
              axisPointer: {          
                type: 'shadow'          // 默认为直线,可选为:'line' | 'shadow'
              }
            },
            grid: {
              left: '1%',
              right: '1%',
              top: '5%',
              bottom: '15%',
              containLabel: true
            },
            xAxis: {     //设置x轴
              type: 'category',
              data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
              splitLine: {show: false},//去除网格线
              axisLabel: {
                show: true,  // 是否显示
                interval: 0,
                textStyle: {
                  fontSize: '12',
                  color: '#fff'
                }
    
              },
              axisTick:{       //x轴刻度线
                show:false,
              },
              axisLine: {       // 坐标轴 轴线
                show: false,  // 是否显示
              },
            },
            yAxis: {
              show: false,  // 是否显示
              splitLine: {
                show: false
                },//去除网格线
    
                // 轴线颜色及轴线文字颜色,但有单独设置文字颜色的,可以覆盖这个颜色
              axisLine: {      
                show: false,  // 是否显示
                // ------   线 ---------
                lineStyle: {
                  type: 'solid'
                }
              },
              // 轴字体样式
              axisLabel: {
                interval: 0,
                textStyle: {
                  fontSize: '12',
                  color: '#fff'
                }
              },
            },
            series: [{
              name: "女生",
              type: "bar",
              barGap: '0%',
              barWidth: '25%',
              data: [5, 20, 40, 10, 10, 20, 49],
              itemStyle: {
                // 给每个柱子设置渐变颜色
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {offset: 0, color: '#17AAF7'},
                        {offset: 1, color: 'rgba(23, 170, 247, 0.3)'}
                      ]
                  ),
                  label: {
                    show: true,  //开启显示
                    position: 'top',  //在上方显示
                    textStyle: {  //数值样式
                      fontSize: '10',
                      color: '#fff'
                    }
                  }
                }
              }
            },
              {
                name: "男生",
                type: "bar",
                barGap: '0%',
                barWidth: '25%',
                data: [190, 29, 46, 12, 90, 70, 23],
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          {offset: 0, color: '#999999'},
                          {offset: 1, color: 'rgba(153, 153, 153, 0.3)'}
                        ]
                    ),
                    label: {
                      show: true,  //开启显示
                      position: 'top',  //在上方显示
                      textStyle: {  //数值样式
                        fontSize: '10',
                        color: '#fff'
                      }
                    }
                  }
                }
              }],
          }
          myChart.setOption(options)
        },
    
    
      }
    }
    
    </script>
    
    <style lang="less" scoped>
    #project-overview {
      width: 100%;
      height: 100%;
        .Chart_one {
          width: 100%;
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
    
        }
        .Chart_one-title{
          display:inline-block;
          width: 100%;
          height: 10px;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 10px;
        }
     
    }
    </style>
    

    初来乍到,有啥规矩,评论区记得 叮!! 一下哦。

    展开全文
  • <template> <div id="project-attendance"> <div class="project-attendance-chart-view"> <div class="Chart_one" id="myChartCurve"></div> </div>...exp...

    <template>
      <div id="project-attendance">
          <div class="project-attendance-chart-view">
            <div class="Chart_one" id="myChartCurve"></div>
          </div>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          list: []
        }
      },
      mounted() {
        this.drawLine()
      },
      methods: {
        drawLine() {
          let myChart = this.$echarts.init(document.getElementById('myChartCurve'))
          let options = {
            color: ["#2DECF2", '#1A8FF2'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                type: 'shadow'          // 默认为直线,可选为:'line' | 'shadow'
              }
            },
            grid: {
              left: '7%',
              right: '3%',
              top: '12%',
              bottom: '1%',
              containLabel: true
            },
            legend: {
              data: ['出勤人数', '在册人数'],
              textStyle: {
                fontSize: '12',
                color: '#fff'
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: [],
              axisLabel: {
                interval: 0,
                rotate: 40,
                textStyle: {
                  fontSize: '12',
                  color: '#fff'
                }
              },
            },
            yAxis: {
              type: 'value',
              // splitLine:{show: false},//去除网格线
              axisLabel: {
                textStyle: {
                  fontSize: '12',
                  color: '#fff'
                }
              },
              splitLine: {  //分割线
                  lineStyle:{
                      width: 2,
                      color:"rgba(48, 98, 105, 0.3)"
                  }
              }
              
            },
            series: [{
              name: '出勤人数',
              smooth: true,
              symbol: 'none',
              data: [],
              type: 'line',
              // 区域填充样式 设置渐变颜色
              areaStyle: {
                  color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: 'rgba(45, 236, 242, 0.4)' // 0% 处的颜色
                      }, {
                          offset: 1, color: 'rgba(45, 236, 242, 0.1)' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                  }
              },
            },
            {
              name: '在册人数',
              smooth: true,
              symbol: 'none',
              data: [],
              type: 'line',
              areaStyle: {
                  color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: 'rgba(26, 143, 242, 0.4)' // 0% 处的颜色
                      }, {
                          offset: 1, color: 'rgba(26, 143, 242, 0.1)' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                  }
              },
            }]
          };
          myChart.setOption(options)
        },
      }
    }
    </script>
    
    <style lang="less" scoped>
    #project-attendance {
      width: 100%;
      height: 100%;
      .project-attendance-chart-view{
          width: 100%;
          height: 100%;
          .Chart_one{
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
          }
      }
    }
    </style>
    

     该吃午饭了,各位选菜吧。蒸羊羔,蒸熊掌,蒸鹿尾儿,烧花鸭,烧雏鸡,烧子鹅,卤猪,卤鸭,酱鸡,腊肉,松花小肚儿,晾肉香肠,什锦苏盘,熏鸡白肚,清蒸八宝猪,江米酿鸭子

    展开全文
  • vue引用echarts

    2021-12-01 22:42:48
    echarts入门实例 效果展示: 代码截图: 代码注意: 1、尽量不使用dom获取元素,使用ref绑定元素,$refs来获取元素 2、表格添加响应式,页面效果更好。但是要注意的是,在挂载在生命周期时,this的指向问题。如果...

    echarts入门实例

    效果展示:
    在这里插入图片描述
    代码截图:
    在这里插入图片描述
    代码注意:
    1、尽量不使用dom获取元素,使用ref绑定元素,$refs来获取元素
    2、表格添加响应式,页面效果更好。但是要注意的是,在挂载在生命周期时,this的指向问题。如果直接使用this话,就会报错

    在这里插入图片描述

    展开全文
  • vue-echarts的文档链接 "vue":"^3.0.0", "echarts":"^5.1.2", "vue-echarts":"^6.0.0-rc.6", 正文 今年开春后,开始使用vue3.0进行开发,以之前也做过的“地图下钻”为例,之前的地图下钻例子 详情地址→ ...

    关于在Vue3.0按需引入vue-echarts6.x会是一个系列,其中会包含:“绘制地图”、“地图样式配置”、“地图数据渲染”、“地图上的数据轮播”、“地图下钻”、“解决轮播和鼠标悬浮的冲突问题”……

    版本

    vue-echarts的文档链接

    "vue": "^3.0.0", 
    
    "echarts": "^5.1.2",
    
    "vue-echarts": "^6.0.0-rc.6",

    正文

    今年开春后,开始使用vue3.0进行开发,以之前也做过的“地图下钻”为例,之前的地图下钻例子详情地址→

    // 之前的开发版本是:
    
    "vue": "^2.5.2",
    
    "vue-echarts-v3": "^2.0.1",

    vue-echarts在一个月前更新了“6.0.0-rc.6版本”,这个版本适用于Echarts5.0+。进入开发:

    Vue3.0安装

    首先确定自己的电脑是否安装了Vue3.0,具体查看步骤如下:

    Win+R --> 打开cmd --> npm install -g vue@next

    文档中有一句话,如下图:

    接下来建立一个Vue3.0的项目,具体命令如下:

    vue create v3.0-v-echarts

    配置项的选择如下图所示,需要说明的是,可以根据自己的需求选择配置:

    项目新建成功后:

    cd v3.0-v-echarts
    
    npm run serve

    此时,这个项目是一个Vue3.0的项目,可以在package.json中查看当前的版本。

    好了,可以开始引入echarts、vue-echarts啦,我们要开始画图啦。

    开始之前,来看文档来→

    不看文档也没关系,接下来直接看代码:

    vue-echarts安装

    npm install echarts vue-echarts
    
    // 安装后的 ​版本
    "vue": "^3.0.0",
    "echarts": "^5.1.2",
    "vue-echarts": "^6.0.0-rc.6",

    main.js中引入vue-echarts,并注册全局组件

    // 页面位置:src/main.js
    ……
    
    // 引入vue-echarts
    import ECharts from 'vue-echarts';
    
    const app = createApp(App)
    
    ……
    
    // 全局注册组件(也可以使用局部注册)
    app.component('v-chart', ECharts)

    接下来直接进入代码

    目录:src/views/child/zjMap.vue

    <template>
      <v-chart id="map" class="map_chart" autoresize :option="option" ref="map" />
    </template>
    
    <script>
    // 引入echarts 核心代码
    import { init, use, registerMap } from "echarts/core";
    // 默认是 canvas 格式,可以修改为 SVGRenderer
    import { CanvasRenderer } from "echarts/renderers";
    /**
     * 按需引入自己需要的配置项模块,以减少打包的体积
     * 本次是地图下钻,仅引入使用的模块
     * 此处用到了toolbox中的下载图片,即ToolboxComponent
     * */ 
    import { ToolboxComponent } from "echarts/components";
    /*
     * 引入需要的 模块API,这里只用到了地图,其他图表类型,如:LineChart/BarChart……
     * 可以理解为:图表的Type + "Chart"
     * 不确定是否存在,可以查看源码:node_modules/echarts/charts
     */
    import { MapChart } from "echarts/charts";
    // 引入Vue3.0的 API
    import { ref } from "vue";
    // 引入地图Json包
    import china from "@/assets/mapJson/china.json";
    
    use([CanvasRenderer, ToolboxComponent]);
    
    // 绘制地图
    registerMap("china", china);
    // 将刚才引入的MapChart用起来
    use([MapChart]);
    
    export default {
      name: "chinaMap",
      setup() {
        const option = ref({
          backgroundColor: "transparent",
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {},
            },
          },
          series: [
            {
              name: "地图",
              type: "map",
              map: "china",
              zlevel: 2,
            },
          ],
        });
        return {
          option,
        };
      },
    };
    </script>
    <style scoped>
    .map_chart {
      margin: 0 auto;
      width: 800px;
      height: 800px;
      border: 1px solid #333;
    }
    </style>
    

    其他页面引入 - 在about.vue页面引入

    <template>
      <div class="about">
        <h1>This is an about page</h1>
        <china-map />
      </div>
    </template>
    
    <script>
    import chinaMapfrom "./child/chinaMap";
    export default {
      name: "About",
      components: {
        chinaMap,
      },
    };
    </script>
    

    --------------

    至此,在vue3.0中使用vue-echarts6.x版本 - 绘制地图完成。

    后续会接着深入,在全部更新完成后,会整理成一个系列。

    文章会同步更新到微信公众号 “DataShow Charts”,可以扫码关注下,源码的链接会发在公众号的文章里,希望多多关注,谢谢你呀~。

    展开全文
  • 最近公司在项目的开发中引入echarts,运行时发现有些问题在使用echarts的时候,下载按钮显示数据不全代码如下:toolbox: {feature: {saveAsImage: {}}},界面效果如下:查找echarts api,找到关于图形下载按钮的代码...
  • vue引用echarts饼图不显示图例

    千次阅读 2021-03-01 11:19:01
    有被自己聪明到 附全部代码 <template> <div class="Echarts" id="Echarts"></div> </template> <script> let echarts = require('echarts/lib/echarts'); // 引入饼状图组件 require('echarts/lib/chart/pie'...
  • 注意Echarts5.0的版本要对应echarts-wordcloud的2.0版本,注意Echarts4.0的版本要对应echarts-wordcloud的1.0版本。 我的使用版本如下 "echarts": "^5.0.1", "echarts-wordcloud": "^2.0.0", 在VUE项目的main....
  • 这里写自定义目录标题vue引入echarts渲染时用ref取dom会报错,解决方法如下,如果解决的话请点个赞。错误截图 vue引入echarts渲染时用ref取dom会报错,解决方法如下,如果解决的话请点个赞。 let dom = this.$refs....
  • Vue-EChartsECharts 的 Vue.js 组件。...安装npm(推荐方式)$ npm install echarts vue-echartsCDN在 HTML 文件按如下方式依次引入 echartsvue-echarts:使用方法用 npm 与 Vue Loader 基于 ES M...
  • 前言以为工作原因需要用在vue中编写Echarts地图 [白眼ing...] 作为一个后台搬砖人员,心里是真的苦。 百度一番后,相关教程一般都是需要下载地图数据文件,引入页面后结合Echarts使用。但一个偶然的机会发现echarts4...
  • Vue引入Echarts

    2021-08-25 22:19:21
    // import echarts from "echarts"; //不正确 import * as echarts from 'echarts' Vue.prototype.$echarts = echarts; this.$echarts.xxx
  • npm install vue-echarts 源码 main.js // main.js import 'echarts' import ECharts from './components/ECharts'; Vue.component('v-chart', ECharts); 组件 src/components/ECharts.vue <!-- 组件 src/...
  • vue3.0 echarts引入用法

    2021-07-13 09:51:07
    2.引入 import * as echarts from 'echarts’ import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; // UI import locale from 'element-plus/lib/locale/lang/zh-cn' ...
  • vue引用echarts图表

    2021-08-21 10:47:38
    1.将容器添加到相应的位置:(设置id,宽、高) <div id="myEchart1" style="width: 100px; height: 100px">...//引用图表页面的路径 3.data()中添加: mounted() { this.loadEchar(); }, 4.method...
  • vue-echarts使用报错

    2021-10-26 00:13:40
    使用vue-echarts时 was not found in vue-demi 版本问题,vue-echarts6.0.0是vue3的,在vue2中引入时会告警 可以回退版本到4.0.2 npm install vue-echarts@4.0.2 -S vue-echarts4.0.2对应的echarts4,所以echats也...
  • vue封装echarts示例

    2021-10-30 18:46:19
    1、首先先弄明白vue怎么引入echarts示例,再弄封装echarts这个事情vue框架引入echarts示例 2、封装组件 pops是: 父组件通过v-bind向子组件传值,子组件通过props来获取父组件传递过来的值,被引用的就是子组件 3...
  • 以前用的Echarts是在H5中用的,这次是vue中使用。 网上看了一下看到了vue-echarts,看了一下git的文档。 vue-echarts 安装-使用 1.安装 1)官方推荐安装方式为(我采用的) npm install echarts vue-echarts 2)直接...
  • vue3封装简易的vue-echarts

    千次阅读 2020-12-21 21:03:01
    vue2中,才开始开发数据可视化大屏,都是用echarts,之后改用为vue-echarts组件,但是到了vue3之后,组件会有一些小问题,所以准备自己封装一套简易的vue-echarts组件,其他的功能之后再迭代上去,足够项目使用...
  • 在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echarts的简单demo,实现过程如下:用了两种实现方式准备工作1、安装echarts依赖控制台输入:npm install...
  • echarts 官方API提供了点击事件chart.on(‘click’)只获取到点击图形的数据; 但是发现数据过小导致图形难以点击到的时候凉凉了,解决的时候发现tooltips中的数据与需要获取到的数据相同,具体代码如下: <div id...
  • Vue-echarts的使用

    千次阅读 2021-04-20 17:55:14
    Vue-ECharts Apache EChartsVue.js 组件。 使用 Apache ECharts 5,同时支持 Vue.js 2/3。 ???? 注意 ???? 若您准备从 vue-echarts ≤ 5 的版本迁移到新版本,请在升级 v6 前阅读 迁移到 v6 部分文档。 没准备...
  • Vue+ECharts的小示例

    2021-06-04 09:09:38
    Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合...
  • vue3.0 使用echarts和百度地图进行地图展示,自定义标注和自定义信息窗口,infoBox,infoWindow
  • vue整合echarts5.0

    2021-07-26 16:17:21
    在main.js中绑定echartsvue的原型链上4.在组件中引入即可 安装Echarts依赖 1.前提:使用vue-cli创建的项目 2.执行命令,默认安装最新版本的echarts npm install echarts -S 3.在main.js中绑定echartsvue的原型...
  • 在 .Vue 文件中创建一个 ECharts 的容器 <template> <div id="app"> <!--创建一个echarts的容器--> <div id="echartContainer" style="width:500px; height:500px"></div> </...
  • import * as echarts from 'echarts/core'; //图表类型按需 import { BarChart, LineChart } from 'echarts/charts'; //组件类型按需 import { TitleComponent, TooltipComponent, GridComponent, V
  • vue组件中使用echarts5

    千次阅读 2021-01-05 22:12:33
    vue组件中使用echarts5报错Cannot read property ‘init’ of undefined",在mounted中加载echarts报错,之前使用import echarts from ‘echarts’ 改为 var echarts = require(‘echarts’) var echarts = ...
  • 第三篇:Vue3.0按需引入vue-echarts6.x版本—0.3-Echarts5.x地图自动轮播数据 时隔差不多一个半月再来更新这个系列,我可真是……虽迟但到??!! 我接受吐槽~ 言归正传,本片讲的是:“地图下钻”,具体的下钻...
  • 一安装 npm install echarts --... Vue.prototype.$echarts = echarts; 新建echarts.vue文件 <template> <div> <div :id="chartId" style="{ width: 500px, height: 500px}"></div> <
  • vue + eCharts 实例

    千次阅读 2020-12-30 08:50:01
    main.js需引入echarts,main.js 代码:// 引入echartsimport echarts from 'echarts'// 引入后将echarts存为全局变量 $echarts 之后用的时候就使用 this.$echartsVue.prototype.$echarts = echartsecharts.vue代码:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,529
精华内容 9,811
关键字:

vue如何引用echarts

vue 订阅