精华内容
下载资源
问答
  • Vue 使用Echarts
    2022-02-22 06:21:19
    在vue中使用echarts有两种方法
    一、安装并全局引入
    1、通过npm获取echarts
    npm install echarts --save
    

    2、在 main.js 中添加下面两行代码

    import * as echarts from 'echarts'
    
    Vue.prototype.$echarts = echarts //挂载到Vue实例上面
    

    二、使用  https://echarts.apache.org/examples/zh/index.html#chart-type-pie

    <template>
      <div>
        <div class="container">
            <div id="echart"></div>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
      // 页面初始化挂载dom
      mounted() {
        this.getLoadEcharts();
      },
      methods: {
        getLoadEcharts() {
          var myChart = this.$echarts.init(
            document.getElementById("echart")
          );
          var colorList = ["#4FE894", "#EF0C27", "#FEE7EA"];
          var listData = [
            { name: "不明", value: 20 },
            { name: "已判明", value: 20 },
            { name: "未发现", value: 20 }
          ];
          var option = {
            color: colorList,
            title: {
              x: "center",
              y: "center",
              textStyle: {
                color: "#000",
                fontSize: 20
              }
            },
            legend: {
              orient: "vertical",
              bottom: 5,
              align: "right",
              right: 15,
              textStyle: {
                color: "#000",
                fontSize: 20
              },
              selectedMode: false,
              data: ["元素1", "元素2", "元素3"]
            },
            tooltip: {
              trigger: "item"
            },
            series: [
              {
                type: "pie",
                center: ['50%', '50%'],
                radius: ['55%', '35%'],
                itemStyle: {
                  normal: {
                    color: function(params) {
                      return colorList[params.dataIndex];
                    }
                  }
                },
                label: {
                  show: true,
                  fontSize: 10,
                  color: "#000",
                  formatter: function(data) {
                    return data.name + ":" + data.percent.toFixed(0) + "%";
                  }
                },
                labelLine: {
                  normal: {
                    length: 15,
                    length2: 15,
                    lineStyle: {
                      width: 2
                    }
                  }
                },
                data: listData
              }
            ]
          };
          myChart.setOption(option);
        }
      }
    };
    </script>
    <style scoped>
    .container{
        width: 300px;
        height: 300px;
        margin-left: 30px;
    }
    #echart{
        width: 100%;
        height: 100%;
    }
    </style>
    
    更多相关内容
  • 主要介绍了vue使用echarts实现水平柱形图实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 可拖拽、缩放、地图坐标点跳转事件
  • vue使用 echarts

    2020-06-09 16:17:09
    这是一个vue 结合echarts的小项目
  • Vue使用echarts(完整版,解决各种报错)

    万次阅读 多人点赞 2022-01-18 15:41:49
    前言:Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,只要是基于JS、TS的框架基本都能使用它,例如Vue,估计IONIC也能用。这一节主要将Vue如何使用echarts,并且包含各种错误解决方法。

    前言:Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,下次研究。

    因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo。

    首先看自己电脑是否安装了Vue,打开终端命令:vue --version,我以前安装过Vue,但是不知道为何报错:
    vue/cli Error: Cannot find module ‘@vue/cli-shared-utils‘

    注意:如果是全局module出错,就全局更新,如果是项目中module出错,就删除(rimraf node_modules)重新安装 (npm i)

    解决方法(更新或者重装):

    npm update -g @vue/cli
    # 或者
    yarn global upgrade --latest @vue/cli
    

    在自己特定的项目文件夹下cmd打开终端

    1. vue create echarts
      第一个是我之前的默认习惯创建
    2. 默认习惯创建,选择package.json之后输入 n 或者 y ,过程简略。
      在这里插入图片描述
      cd echarts 到该文件夹下,npm run serve显示项目运行正常:
      在这里插入图片描述

    正式开始尝试Echarts
    建议大家要学会看官网文档:https://echarts.apache.org/handbook/zh/get-started/
    能学习到两点:

    1. 在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。
    2. 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。

    基于这两句话进行研究:我通常是在About中尝试进行写Demo。在这里插入图片描述
    Ctrl + C结束项目。
    在项目终端安装echarts:npm install echarts --save
    请注意,2022年后安装的echarts都是5.X版本,可以在package.json中看到,不知为何,这个和Vue项目不匹配,导致发生错误,知道原因的麻烦在下面留言。

    全局引入:在 main.js 中全局引入 echarts在这里插入图片描述

    import echarts from "echarts";
    Vue.prototype.$echarts = echarts;
    

    在About.Vue中的<template> </template>写<div id="main" style="width: 600px; height: 400px"></div>,如上图,对应1. 在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。

    <div id="main" style="width: 600px; height: 400px"></div>
    

    对应 2.通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。这个需要在script中进行操作。
    示例一:

        drawChart() {
          // 基于准备好的dom,初始化echarts实例  这个和上面的main对应
          let myChart = this.$echarts.init(document.getElementById("main"));
          // 指定图表的配置项和数据
          let option = {
            title: {
              text: "ECharts 入门示例",
            },
            tooltip: {},
            legend: {
              data: ["销量"],
            },
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },
    

    然后新建monted(){},否则会出现init没有定义等等错误。

    mounted() {
        this.drawChart();
      },
    

    到这一步,其实示例一已经完成,但是我们运行发现图片无法显示,只有一处警告错误:"export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
    起着怀疑的态度进行百度,https://blog.csdn.net/Aom_yt/article/details/110947734 ,给出的原因是“可能还不能支持最新版的echarts5.0” 这句话不一定对,麻烦知道原因的在下面进行评论。
    解决方法:

    1. 卸载: npm uninstall echarts
    2. 重装echarts: npm install echarts@4.9.0
    3. 重新运行项目,发现成功了。
      在这里插入图片描述
      示例二:
      我的需求和目标是将https://echarts.apache.org/examples/zh/editor.html?c=bar-race-country&version=5.2.1导入到我的Vue项目中,基于上面1和2原理,上代码:
    <div id="main2" style="width: 1600px; height: 1400px"></div>
    
        drawChart2() {
          // 基于准备好的dom,初始化echarts实例  这个和上面的main2对应
          let myChart = this.$echarts.init(document.getElementById("main2"));
          // 指定图表的配置项和数据
          var ROOT_PATH =
            "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
    
          // var chartDom = document.getElementById("main");
          // var myChart = echarts.init(chartDom);
          var option;
    
          const updateFrequency = 2000;
          const dimension = 0;
          const countryColors = {
            Australia: "#00008b",
            Canada: "#f00",
            China: "#ffde00",
            Cuba: "#002a8f",
            Finland: "#003580",
            France: "#ed2939",
            Germany: "#000",
            Iceland: "#003897",
            India: "#f93",
            Japan: "#bc002d",
            "North Korea": "#024fa2",
            "South Korea": "#000",
            "New Zealand": "#00247d",
            Norway: "#ef2b2d",
            Poland: "#dc143c",
            Russia: "#d52b1e",
            Turkey: "#e30a17",
            "United Kingdom": "#00247d",
            "United States": "#b22234",
          };
          $.when(
            $.getJSON("https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json"),
            $.getJSON(ROOT_PATH + "/data/asset/data/life-expectancy-table.json")
          ).done(function (res0, res1) {
            const flags = res0[0];
            const data = res1[0];
            const years = [];
            for (let i = 0; i < data.length; ++i) {
              if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
                years.push(data[i][4]);
              }
            }
            function getFlag(countryName) {
              if (!countryName) {
                return "";
              }
              return (
                flags.find(function (item) {
                  return item.name === countryName;
                }) || {}
              ).emoji;
            }
            let startIndex = 10;
            let startYear = years[startIndex];
            option = {
              grid: {
                top: 10,
                bottom: 30,
                left: 150,
                right: 80,
              },
              xAxis: {
                max: "dataMax",
                axisLabel: {
                  formatter: function (n) {
                    return Math.round(n) + "";
                  },
                },
              },
              dataset: {
                source: data.slice(1).filter(function (d) {
                  return d[4] === startYear;
                }),
              },
              yAxis: {
                type: "category",
                inverse: true,
                max: 10,
                axisLabel: {
                  show: true,
                  fontSize: 14,
                  formatter: function (value) {
                    return value + "{flag|" + getFlag(value) + "}";
                  },
                  rich: {
                    flag: {
                      fontSize: 25,
                      padding: 5,
                    },
                  },
                },
                animationDuration: 300,
                animationDurationUpdate: 300,
              },
              series: [
                {
                  realtimeSort: true,
                  seriesLayoutBy: "column",
                  type: "bar",
                  itemStyle: {
                    color: function (param) {
                      return countryColors[param.value[3]] || "#5470c6";
                    },
                  },
                  encode: {
                    x: dimension,
                    y: 3,
                  },
                  label: {
                    show: true,
                    precision: 1,
                    position: "right",
                    valueAnimation: true,
                    fontFamily: "monospace",
                  },
                },
              ],
              // Disable init animation.
              animationDuration: 0,
              animationDurationUpdate: updateFrequency,
              animationEasing: "linear",
              animationEasingUpdate: "linear",
              graphic: {
                elements: [
                  {
                    type: "text",
                    right: 160,
                    bottom: 60,
                    style: {
                      text: startYear,
                      font: "bolder 80px monospace",
                      fill: "rgba(100, 100, 100, 0.25)",
                    },
                    z: 100,
                  },
                ],
              },
            };
            // console.log(option);
            myChart.setOption(option);
            for (let i = startIndex; i < years.length - 1; ++i) {
              (function (i) {
                setTimeout(function () {
                  updateYear(years[i + 1]);
                }, (i - startIndex) * updateFrequency);
              })(i);
            }
            function updateYear(year) {
              let source = data.slice(1).filter(function (d) {
                return d[4] === year;
              });
              option.series[0].data = source;
              option.graphic.elements[0].style.text = year;
              myChart.setOption(option);
            }
          });
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },
    
    mounted() {
        this.drawChart2();
      },
    

    不一一解释了,只要你弄懂了示例一,这个也能运行出来,同时也能举一反三。
    在这里插入图片描述
    其他:
    在学习Echarts时候,发现这个用途很广,很多的人都在使用,也延伸出来了很多包,比如

    1. 封装的D3,简化了代码。https://github.com/Finedl/Vue-echart-D3
      示例:
      在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    1. HighCharts,在相比echarts有更多的风格等等,如何使用请参考:https://www.highcharts.com/blog/download/
      在这里插入图片描述
    展开全文
  • 1.使用[removed] let myChart = echarts.init(document.getElementById(dom)) [removed] = function () { myChat.resize() } 优点:可以根据窗口大小实现自适应 缺点: 多个图表自适应写法比较麻烦(当一个页面...
  • 本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下 该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --...
  • VUE实例中使用Echarts 安装echarts依赖: npm install echarts -s 编写代码: 引入echarts对象: 鉴于准备工作中已经通过npm安装了echarts依赖,所以可以直接在vue文件中使用代码import echarts from “echarts...
  • }, } 注意:这里$echarts,是在全局配置了echart 1.vue 项目中 引用echarts cnpm install echarts -S 2.安装成功后 在main.js中全局配置echarts 就不需要再每个页面都引入echart: 参考链接:echarts自适应

    在这里插入图片描述

    <template>
      <div
        :class="className"
        :style="{ height: height, width: width }"
        ref="Echart"
        id="myChart"
      />
    </template>
    
     methods: {
       init() {
          const self = this; //因为箭头函数会改变this指向,指向windows。所以先把this保存
          setTimeout(() => {
            window.addEventListener("resize", function () {
              self.chart = self.$echarts.init(self.$refs.Echart);
              self.chart.resize();
            });
          }, 10);
        },
     }
    

    注意:这里$echarts,是在全局配置了echart
    1.vue 项目中 引用echarts

    cnpm install echarts -S
    

    2.安装成功后 在main.js中全局配置echarts
    在这里插入图片描述
    就不需要再每个页面都引入echart:
    在这里插入图片描述

    参考链接:echarts自适应

    展开全文
  • vue使用echarts实现中国地图

     效果图

    旧版echarts须引入

    import "echarts/map/js/china.js";

    新版echarts移除了地图包,需要下载地图包才可以使用 echarts地图包

    <template>
      <div id="china_map"></div>
    </template>
    
    <script>
    //引入中国地图数据 (*********重中之重)
    import "@/components/Charts/map/js/china.js";
    export default {
      name: "map",
      data() {
        return {};
      },
      mounted() {
        // 渲染echarts-地图
        this.initEchartsMap();
      },
      methods: {
        // 渲染echarts-地图
        initEchartsMap() {
          let dataList = [
            {
              name: "南海诸岛",
              value: 0,
              eventTotal: 100,
              specialImportant: 10,
              import: 10,
              compare: 10,
              common: 40,
              specail: 20,
            },
            {
              name: "北京",
              value: 0,
            },
            {
              name: "天津",
              value: 0,
            },
            {
              name: "上海",
              value: 10,
            },
            {
              name: "重庆",
              value: 20,
            },
            {
              name: "河北",
              value: 30,
            },
            {
              name: "河南",
              value: 0,
            },
            {
              name: "云南",
              value: 0,
            },
            {
              name: "辽宁",
              value: 0,
            },
            {
              name: "黑龙江",
              value: 40,
            },
            {
              name: "湖南",
              value: 0,
            },
            {
              name: "安徽",
              value: 0,
            },
            {
              name: "山东",
              value: 50,
            },
            {
              name: "新疆",
              value: 0,
            },
            {
              name: "江苏",
              value: 0,
            },
            {
              name: "浙江",
              value: 0,
            },
            {
              name: "江西",
              value: 0,
            },
            {
              name: "湖北",
              value: 0,
            },
            {
              name: "广西",
              value: 0,
            },
            {
              name: "甘肃",
              value: 0,
            },
            {
              name: "山西",
              value: 0,
            },
            {
              name: "内蒙古",
              value: 0,
            },
            {
              name: "陕西",
              value: 0,
            },
            {
              name: "吉林",
              value: 0,
            },
            {
              name: "福建",
              value: 0,
            },
            {
              name: "贵州",
              value: 0,
            },
            {
              name: "广东",
              value: 0,
            },
            {
              name: "青海",
              value: 0,
            },
            {
              name: "西藏",
              value: 0,
            },
            {
              name: "四川",
              value: 0,
            },
            {
              name: "宁夏",
              value: 0,
            },
            {
              name: "海南",
              value: 0,
            },
            {
              name: "台湾",
              value: 0,
            },
            {
              name: "香港",
              value: 0,
            },
            {
              name: "澳门",
              value: 0,
            },
          ];
          let options = {
            tooltip: {
              triggerOn: "mousemove", //mousemove、click
              padding: 8,
            },
            visualMap: {
              show: true,
              type: "continuous",
              min: 0,
              max: 100,
              left: 0,
              top: 0,
              itemGap: 0,
              showLabel: true,
              realtime: false,
              itemWidth: 12,
              itemHeight: 90,
              calculable: true,
            },
            geo: {
              map: "china",
              scaleLimit: {
                min: 1,
              },
              zoom: 1,
              roam: true,
              top: 30,
              bottom: 10,
              label: {
                normal: {
                  show: true,
                  fontSize: "8",
                  color: "rgba(0,0,0)",
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "rgba(0, 0, 0, 0.2)",
                },
                emphasis: {
                  areaColor: "#f2d5ad",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  borderWidth: 0,
                },
              },
            },
            series: [
              {
                name: "地区分布",
                type: "map",
                roam: true,
                geoIndex: 0,
                data: dataList,
              },
            ],
          };
          let mapWrapper = document.getElementById("china_map");
          let initChart = this.$echarts.init(mapWrapper);
          initChart.setOption(options);
        },
      },
    };
    </script>
    <style lang="scss" scoped>
    #china_map {
      height: 100%;
      width: 100%;
    }
    </style>
    展开全文
  • vue使用echarts图表自适应宽度 代码如下(示例): mounted () { setTimeout(() => { if (this.getchart) { this.getchart.resize() } }, 50) window.addEventListener('resize', this.resize()) }, ...
  • vue 使用echarts绘制折线图

    千次阅读 2021-08-24 17:33:47
    -- 方法一,注册echartsvue的原型对象中,指定某个div作为echarts的画布 --> <el-row :gutter="20" style="margin-bottom: 20px;"> <el-col :span="24"> <el-card shadow="always"> .
  • vue使用echarts绘制地图

    千次阅读 2021-02-20 17:31:03
    由于vue-echarts网上能找到的资源太少了,鼓捣了好久地图也没出来,最后还是放弃了,还是用echarts吧。直接贴代码 <template> <div class=""> <div id="map" :style="{ height: '800px', width: ...
  • 1、效果说明图; 2、完整的代码实现及注释; 3、轻松易懂
  • vue使用echarts报错

    2022-01-27 14:48:16
    import echarts from 'echarts' 报错 解决方案: 通过 npm 上安装的 ECharts 会放在node_modules目录下。可以直接在项目代码中require('echarts')得到 ECharts。 import echarts from 'echarts' 改为: ...
  • vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新?  这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础...
  • 主要介绍了在vue使用Echarts画曲线图的示例,帮助大家在vue中绘制图表,感兴趣的朋友可以了解下
  • Vue使用echarts地图进阶1(实现单次下钻功能),由于涉及的JSON文件不多,所以结合axios,按需动态请求本地JSON文件
  • 首先安装引入Echarts,我是直接把Echarts挂到VUE全局变量上了 //引入echarts import Vue from 'vue'; import echarts from 'echarts'; Vue.prototype.$echarts = echarts; ...
  • vue使用echarts地图 //myMap.vue //china.js下载地址 //mymap.js下载地址 import china from "@/components/map/china.js"; import option from "@/components/map/mymap.js"; export default { methods: { ...
  • <template> <div> <div id="main" style="height:500px;width:600px">...import * as echarts from "echarts"; import dataTool from "echarts/extension/dataTool"; export de
  • vue使用echarts实现数据可视化,动态更新echarts上的数据,动态更新图表数据,vueecharts结合,动态获取数据。
  • vue_echart_demo 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 自定义配置 请参阅。
  • vue使用ECharts时的异步更新与数据加载使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面)在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器初始化一个 echarts 实例并通过 setOption 方法...
  • 使用echarts后切换路由(网上说内存泄漏什么的,看浏览器控制台没有报错)所有页面白屏 结果,好家伙我的data方法没有写return,但是控制台也不报错,然后echarts的页面一直卡死,错怪了它 ...
  • vue使用 echarts添加点击事件的坑

    千次阅读 2020-10-22 15:44:08
    事件外面定义 let that = this 事件里面定义使用that即可解决
  • vue使用echarts步骤详解

    2020-10-11 13:53:52
    一:安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 ...cnpm install echarts -S 二:创建图表 首先需要全局引入 在main.js中 ...Vue.prototype.$echarts = echarts 三:html引用echarts  

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,613
精华内容 11,445
关键字:

vue使用echarts

友情链接: chiiiiiiiiirped.rar