精华内容
下载资源
问答
  • vue引入echarts
    2021-08-25 22:19:21
    // import echarts from "echarts";                   //不正确
    import * as echarts from 'echarts'
    Vue.prototype.$echarts = echarts;

    this.$echarts.xxx

    更多相关内容
  • vue引入echarts

    2022-05-02 17:16:17
    一、cmd命令:vue create demo 二、项目命令窗口:npm ...Vue.prototype.$echarts = echarts 四:index.vue页面使用 <template> <div class="app"> <div style="width:500px;height:500px" r.

    一、cmd命令:vue create demo

    二、项目命令窗口:npm install echarts --save

    三:main.js 全局引入形式
     

    import * as echarts from "echarts"
    Vue.prototype.$echarts = echarts

    四:index.vue页面使用

    <template>
    	<div class="app">
    		<div style="width:500px;height:500px" ref="chart"></div>
    	</div>
    </template>
    <script>
    	const echarts = require('echarts');
    	export default {
    		data() {
    			return {
    				data: []
    			}
    		},
    		mounted() {
    			this.initCharts();
    		},
    		methods: {
    			initCharts() {
    				let myChart = echarts.init(this.$refs.chart);
    				myChart.setOption({
    					title: {
    						text: "ECharts 入门示例",
    					},
    					tooltip: {},
    					xAxis: {
    						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    					},
    					yAxis: {},
    					series: [{
    						name: "销量",
    						type: "bar",
    						data: [5, 20, 36, 10, 10, 20],
    					}, ],
    				})
    			}
    		}
    	}
    </script>
    

    展开全文
  • 主要介绍了vue 项目引入echarts 添加点击事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 引入echarts

    2022-05-13 18:18:41
    注意:vue-echarts在使用前要先安装echarts,不要只安装vue-echarts这一个 安装vue-echarts npm i -S vue-echarts echarts 注意:Vue 2 下使用 vue-echarts,必须还要安装 @vue/composition-api : npm i -D @vue/...

    vue-echarts介绍:https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.md

    注意:vue-echarts在使用前要先安装echarts,不要只安装vue-echarts这一个

    安装vue-echarts

    npm i -S vue-echarts echarts
    

    注意:Vue 2 下使用 vue-echarts,必须还要安装 @vue/composition-api :

    npm i -D @vue/composition-api
    

    main.js中全局注册组件

    import 'echarts'
    import ECharts from 'vue-echarts'
    Vue.component('v-chart', ECharts)
    

    基本使用

    <template>
       <v-chart :option="option_column" style="height: 400px"></v-chart>
    </template>
     
    <script>
    export default {
      data() {
        return {
          option_column: {
            title: { text: "Column Chart" },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
              },
            ],
          },
        };
      },
    };
    </script>
    

    自适应屏幕
    方式1:autoresize:true 【推荐】

    该方式自适应需满足两个条件:

    1, 加上autoresize属性。
    2, 图表外层需要指定vw单位的宽度,如width:100vw;

    <template>
        <div style="width:100vw">
          <v-chart autoresize :option="option_column" style="height: 400px"></v-chart>
        </div>
    </template>
     
    <script>
    export default {
      data() {
        return {
          option_column: {
            title: { text: "Column Chart" },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
              },
            ],
          },
        };
      },
    };
    </script>
     
    <style  scoped lang="scss">
    </style>
    

    方式二:给window注册resize监听事件

    <!--main-->
    <template>
      <div>
        <v-chart
          ref="ref_echart1"
          :option="option_column"
          style="height: 400px"
        ></v-chart>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          option_column: {
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
              },
            ],
          },
        };
      },
      mounted() {
        window.addEventListener("resize", () => this.$refs?.ref_echart1?.resize());
      },
      methods: {},
    };
    </script>
    

    配置样式
    官网样式:https://echarts.apache.org/zh/download-theme.html

    引入Echarts内置样式
    Echarts内置了很多样式,在使用时需手动导入指定的样式。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    自定义主题样式:
    配置主题地址:https://echarts.apache.org/zh/theme-builder.html
    在这里插入图片描述
    注意这里下载json版本。js版本没有引入成功
    在这里插入图片描述
    在这里插入图片描述

    <!--main-->
    <template>
      <div style="width: 400px">
        <v-chart :theme="myEchartStyle" :option="option_column" style="height: 400px"></v-chart>
      </div>
    </template>
     
    <script>
    import myEchartStyle from "@/assets/myEchartStyle.json";
     
    export default {
      components: {},
      data() {
        return {
          myEchartStyle,
          option_column: {
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          }
        };
      },
      props: {},
      created() {},
      mounted() {},
      computed: {},
      methods: {}
    };
    </script>
     
    <style lang="scss" scoped>
    </style>
    

    给当前vue页面中的所有图表注册样式:
    在这里插入图片描述
    在这里插入图片描述

    <!--main-->
    <template>
      <div style="width: 400px">
        <v-chart :option="option_column" style="height: 400px"></v-chart>
        <v-chart :option="option_column" style="height: 400px"></v-chart>
      </div>
    </template>
    <script>
    import myEchartStyle from "@/assets/myEchartStyle.json";
    import { THEME_KEY } from "vue-echarts";
    export default {
      components: {},
      provide: {
        [THEME_KEY]: myEchartStyle
      },
      data() {
        return {
          option_column: {
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          }
        };
      }
    };
    </script>
    
    展开全文
  • vue引入echarts map地图

    千次阅读 2022-03-23 11:56:44
    2.引入echarts依赖 import * as echarts from 'echarts' 3.初始化echarts initMap() { var myChart = echarts.init(document.getElementById('map_1')) var data = [ { name: '高铁站', value: 155000 },

    1.找到该市区的json文件并下载到本地

    DataV.GeoAtlas地理小工具系列

    2.引入echarts依赖

    import * as echarts from 'echarts'

    3.初始化echarts

        initMap() {
          var myChart = echarts.init(document.getElementById('map_1'))
          var data = [
            { name: '高铁站', value: 155000 },   //这里的值与后面series.symbolSize属性的值有关联
            { name: '中伙', value: 120000 },
            { name: '火车站', value: 140000 },
          ]
          var geoCoordMap = {
            高铁站: [113.930405, 29.726476],  //地点坐标可以在百度地图上查询
            中伙: [113.998687, 29.776476],
            火车站: [113.999176, 29.786476],
          }
          var convertData = function (data) {
            var res = []
            for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name]
              if (geoCoord) {
                res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value),
                })
              }
            }
            return res
          }
          var option = {
            tooltip: {
              trigger: 'item',
              //自定义修改显示
              formatter: function (data) {
                return '<div><p>电量:' + data.value[2] + '</p></div>'
              },
            },
    
            geo: {
              map: 'china',
              label: {
                emphasis: {
                  show: false,
                },
              },
              roam: false, //禁止其放大缩小
              itemStyle: {
                normal: {
                  areaColor: '#4c60ff',
                  borderColor: '#002097',
                },
                emphasis: {
                  areaColor: '#293fff',
                },
              },
            },
            series: [
              {
                name: '人流量',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: function (val) {
                  return val[2] / 10000
                },
                label: {
                  normal: {
                    position: 'outside', // 设置标签向外
                    formatter: '{b}', // 设置标签格式
                    position: 'right',
                    show: true,
                  },
                  emphasis: {
                    show: true,
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#ffeb7b',
                  },
                },
              },
            ],
          }
          const appData = require('./js/chibishi.json')  //本地json路径
          echarts.registerMap('chibishi', appData) //注册
          option.geo.map = 'chibishi'
          myChart.setOption(option)
          window.addEventListener('resize', function () {
            myChart.resize()
          })
        },

    4.示意图

     

    展开全文
  • 1,安装echarts插件,可查看官方文档Apache ECharts cnpm i -S echarts 2,可在package.json文件中 "dependencies"内查看echarts安装版本,每个版本不同,...Vue.prototype.$echarts = Echarts 4,如果引入版本太...
  • vue引入Echarts画饼图详解

    千次阅读 2022-01-15 16:25:00
    vue引入Echarts画饼图,圆环图、设置饼图上样式据等详解
  • vue引入echarts遇到的报错问题:在浏览器一直报“reading init”;在浏览器报“reading ‘getAttribute’”
  • 静态 <template> <div id="myChart" :style="{width: '300px', height: '300px'}"></div> </template> <script>... msg: 'Welcome to Your Vue.js App' } }, mount
  • vue引入echarts报错解决

    千次阅读 2022-04-08 23:43:22
    Vue项目中引入Echart(使用npm install指令)的时候报错: PS G:> npm install npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an old version of npm, npm WARN ...
  • vue 引入 echarts,init初始化报错

    千次阅读 2022-04-29 22:36:50
    vue 引入 echarts,init初始化报错 1.下载echarts npm install echarts --save 1 2.页面中引入,我只有一个页面需要引用到echarts,所以就直接在页面中引入 import echarts from 'echarts' 1 3.在methods中写对应...
  • 效果图 echartsecharts-wordcloud版本 注意Echarts5.0的版本要对应echarts-wordcloud的2.0版本,注意Echarts4.0的版本要对应...在VUE项目的main.js全局引入 import * as echarts from 'echarts'; Vue.proto...
  • 百度一番后,相关教程一般都是需要下载地图数据文件,引入页面后结合Echarts使用。但一个偶然的机会发现echarts4.x的依赖包中已经包含了中国以及各省的地图数据。无需自己下载。所以特地写个博客,用以记录并给后来...
  • 文章目录前言一、可能原因一Vue项目未引入echarts二、可能原因二引入版本不对总结 前言 一、可能原因一 Vue项目未引入echarts 引入echarts时必须在你要运行的具体的Vue项目中 比如你的Vue项目名称为demo,那就必须...
  • 1.安装并引入echarts-liquidfill npm install echarts-liquidfill // 安装 import 'echarts-liquidfill' // 组件引入
  • 在安装echarts后引入echarts-liquidfill npm install echarts-liquidfill -S 页面引入 创建一个新的页面进行引入,下面例子实现一个简单的水球图 <template> <div id="container" /> </template>...
  • 前端使用vue+Echarts进行折线图绘制,可将数学公式图形化
  • 由于在vue中按需引入echarts,虽然打包时比全局引入小了一半,但还是占很多内存。 所以经过不懈研究,发现了一个能让vue项目打包时更小的方法,就是CDN引入 CDN这个方法时真的很好用,打包之后发现基本没占啥空间。...
  • 今天是初次使用echarts,寻思放个官方案例先看一下,结果遇到一个了一个很奇怪的问题,一直报如下图所示的错误—“init of undefined”。 搜了一下主要有几种说法,可以按照一下步骤排查: 1、检查一下echarts是否...
  • 什么是EChartsEcharts 商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重...
  • echarts渐变仪表盘,自定义样式
  • Vue引入echarts使用教程

    千次阅读 2019-05-26 02:24:39
    本文将介绍如何在vue project中引入echarts,在引入echarts之前首先需要添加echarts的依赖包。 vue2.0框架添加方法。 npm install echarts 复制代码 vue3.0框架添加方法。 npm add echarts 复制代码全局引入 在...
  • vue 引入echarts及使用中的常见问题

    千次阅读 2022-03-23 09:27:08
    1、在vue引入echarts(import echarts from 'echarts')出现的报错问题([Vue warn]: Error in mounted hook: "TypeError: this.$echarts is undefined"), 2、将echarts封装成子组件,多次调用却只有一个图的...
  • 官方地址:全国到省份的地图下钻,2种引入地图方式:js引入方式,例子:src/views/EchartsMapImportJs.vuejson引入方式,例子:src/views/EchartsMapImportJson.vue说明:地图钻取,省份返回全国地图后,再次点击,...
  • 封装 常用 echarts 图表: 首先需要下载echarts: // 命令行 npm install echarts --save ...let Echarts = function(Vue) { Object.defineProperties(Vue.prototype, { $chart: { get() { return
  • Vue引入echarts

    千次阅读 2021-07-19 18:28:49
    全局引入echarts并使用 1、在main.js中添加 // 导入echarts(最新) import * as echarts from 'echarts'; // 并设置对应的属性 Vue.prototype.$echarts = echarts; 2、在需要使用的组件中 var myChart = this.$...
  • 代码如下: <el-dialog :visible.sync="open" width="80%" @close="closeWave()"> <div id="myChart" :style="{ width: width, height: '500px' }"></div> </el-dialog>
  • Vue引入echarts以及使用

    千次阅读 2022-08-17 19:09:18
    今天来告诉大家如何将echart引入vue并巧妙利用钩子函数对表格数据进行渲染。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,414
精华内容 4,165
关键字:

vue引入echarts