精华内容
下载资源
问答
  • vue 引入Echarts

    千次阅读 2019-07-18 19:05:28
    vue 引入Echarts(1)下载Echarts(2)全局引入Echarts(3)创建一个图表 (1)下载Echarts WebStorm打开创建好的vue项目,接下来,打开cmd,下载Echarts: npm install echarts -S (2)全局引入Echarts 在/src/...

    (1)下载Echarts

    WebStorm打开创建好的vue项目,打开cmd,进入到项目所在文件夹,输入命令下载Echarts:

    npm install echarts -S
    

    (2)全局引入Echarts

    在/src/main.js中加入:

    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    

    (3)创建一个图表

    绘制柱状图:

    <template>
      <div id="histogramChart">
      </div>
    </template>
    
    <script>
      export default {
        name:'Histogram',
        data(){
          return {}
        },
        mounted() {
          //在mounted生命周期函数中实例化echarts对象
          this.drawHistogarm();
        },
        methods:{
          drawHistogarm(){
            //初始化echarts实例
            let histogram = this.$echarts.init(document.getElementById('histogramChart'))
            let option = {
              title: {
                text: '柱状图示例',
                left: 'center'
              },
              tooltip: {
                trigger:'axis'
              },
              xAxis: {
                type: 'category',
                data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                name: '数量',
                type: 'bar',
                barWidth: '50%',//设置柱子的宽度
                data: [204,106,190,230,100,170,201]
              }]
            };
            histogram.setOption(option);
          }
        }
      }
    </script>
    
    <style scoped>
      #histogramChart {
        width: 500px;
        height: 500px;
      }
    </style>
    

    页面效果如下:
    在这里插入图片描述
    参考链接:
    https://www.jianshu.com/p/cf0a54374419
    https://blog.csdn.net/guozhangqiang/article/details/82379306

    展开全文
  • vue引入eCharts

    2020-11-09 21:15:58
    vue引入eCharts 1.下载eCharts npm i echarts -S 2.在main.js中全局调用echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在vue组件中调用echarts基本案例 <template> ...

    vue引入eCharts

    1.下载eCharts
     

    npm i echarts -S

    2.在main.js中全局调用echarts
     

    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts

    3.在vue组件中调用echarts基本案例

    <template>
      <div>
        <div id="echart" :style='{ height: "300px" }'></div>
      </div>
    </template>
    
    <script>
    export default {
      mounted () {
        this.option()
      },
      methods: {
        // 指定图表的配置项和数据
        option () {
          const myChart = this.$echarts.init(document.getElementById('echart'))
          myChart.setOption(
            {
              title: { text: 'ECharts 入门示例' },
              tooltip: {},
              legend: { data: ['销量'] },
              xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', ' 裤子', '高跟鞋', '袜子'] },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }]
            })
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    

     

    展开全文
  • vue 引入echarts

    2020-08-05 17:34:06
    添加依赖 npm install echarts -S ...Vue.prototype.$echarts = echarts .vue 实例 <template> <div id="app"> <div id="main" style="width: 600px;height:400px;"></.
    • 添加依赖
    npm install echarts -S
    #或者
    yarn add vue-echarts
    
    • 全局引入

    main.js 文件里添加

    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    
    • .vue 实例
    <template>
      <div id="app">
        <div id="main" style="width: 600px;height:400px;"></div>
      </div>
    </template>
    
    <script>
      export default {
        name: "app",
        methods: {
          drawChart() {
            // 基于准备好的dom,初始化echarts实例
            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);
          }
        },
        mounted() {
          this.drawChart();
        }
      };
    </script>
    
    <style lang="less" scoped>
    
    </style>
    
    展开全文
  • vue引入echarts

    2020-12-18 13:21:17
    2引入(只需在要使用的页面引入即可) import * as echarts from "echarts"; 3具体代码(test.vue) <template> <div id="chartLineBox" style="width: 90%;height: 70vh;"> </div> </...

    1安装echarts

    npm install echarts --save

    2引入(只需在要使用的页面引入即可),敲重点,一般都是引入不当导致图像出不来

    import * as echarts from "echarts";

    3具体代码(test.vue)

    <template>
    
      <div id="chartLineBox" style="width: 90%;height: 70vh;"> </div>
    
    </template>
    
    <script>
      //import 'echarts/theme/walden.js'
    
      import * as echarts from "echarts";
    
      export default {
        name: 'GetMoneyData',
        mounted(){
          this.chartLine = echarts.init(document.getElementById('chartLineBox'));
    
          // 指定图表的配置项和数据
          var option = {
            tooltip: {              //设置tip提示
              trigger: 'axis'
            },
    
            legend: {               //设置区分(哪条线属于什么)
              data:['平均成绩','学生成绩']
            },
            color: ['#8AE09F', '#FA6F53'],       //设置区分(每条线是什么颜色,和 legend 一一对应)
            xAxis: {                //设置x轴
              type: 'category',
              boundaryGap: false,     //坐标轴两边不留白
              data: ['2019-1-1', '2019-2-1', '2019-3-1', '2019-4-1', '2019-5-1', '2019-6-1', '2019-7-1',],
              name: 'DATE',           //X轴 name
              nameTextStyle: {        //坐标轴名称的文字样式
                color: '#FA6F53',
                fontSize: 16,
                padding: [0, 0, 0, 20]
              },
              axisLine: {             //坐标轴轴线相关设置。
                lineStyle: {
                  color: '#FA6F53',
                }
              }
            },
            yAxis: {
              name: 'SALES VOLUME',
              nameTextStyle: {
                color: '#FA6F53',
                fontSize: 16,
                padding: [0, 0, 10, 0]
              },
              axisLine: {
                lineStyle: {
                  color: '#FA6F53',
                }
              },
              type: 'value'
            },
            series: [
              {
                name: '平均成绩',
                data:  [220, 232, 201, 234, 290, 230, 220],
                type: 'line',               // 类型为折线图
                lineStyle: {                // 线条样式 => 必须使用normal属性
                  normal: {
                    color: '#8AE09F',
                  }
                },
              },
              {
                name: '学生成绩',
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'line',
                lineStyle: {
                  normal: {
                    color: '#FA6F53',
                  }
                },
              }
            ]
          };
    
          // 使用刚指定的配置项和数据显示图表。
          this.chartLine.setOption(option);
        }
    
      }
    </script>
    
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      h1, h2 {
        font-weight: normal;
      }
      ul {
        list-style-type: none;
        padding: 0;
      }
      li {
        display: inline-block;
        margin: 0 10px;
      }
      a {
        color: #42b983;
      }
    </style>
    

     

    展开全文
  • vue 引入 echarts 小例子

    2021-01-05 17:36:04
    写在前:这是一个使用vue引入 echarts 的案例,最简单的demo。全局使用。官网链接 1、 使用npm 获取 echarts npm install echarts --save 2、 全局引入 main.js 中引入
  • vue引入echarts并完成动态渲染 只需以下几步就可以在vue项目中完成echarts的渲染。 1.引入 安装echarts运行依赖,并引入项目。 import echarts from 'echarts' 2.创建一个echarts的盒子容器 <div id="lineChart...
  • vue 引入 echarts 报init的问题

    千次阅读 2020-12-03 16:43:24
    vue 引入 echarts 报init的问题 今天是2020 12 03 记录一下echarts 的问题 使用方式我就不写了,百度一下很多的。 这里我要说的是,按照要求引入echarts init会报错 这个时候看一下你下载的echarts 是不是直接下载...
  • vue引入echarts图表根据接口请求获取数据 下载echarts npm i echarts -S main.js引入echarts Vue.use(echarts); Vue.prototype.$echarts = echarts; 1.html 命名id 在带有id的盒子上进行绘制图表 <div class=...
  • vue 引入 echarts,init初始化报错 1.下载echarts npm install echarts --save 2.页面中引入,我只有一个页面需要引用到echarts,所以就直接在页面中引入 import echarts from 'echarts' 3.在methods中写对应的...
  • vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 划中国地图 引入中国地图数据 import 'echarts/map/js/china.js' <template>...
  • Vue引入echarts使用教程

    千次阅读 2019-05-26 10:22:58
    本文将介绍如何在vue project中引入echarts,在引入echarts之前首先需要添加echarts的依赖包。 vue2.0框架添加方法。 npm install echarts vue3.0框架添加方法。 npm add echarts 全局引入 在全局引入,需要在...
  • 标题关于vue 引入 echarts的问题 npm 安装之后 在main.js中加入下列代码 import * as echarts from "echarts" app.config.globalProperties.$echarts=echarts vue3中需要这样引入并把echarts挂载到vue原型上 遇到的...
  • vue引入echarts图表

    2019-09-28 19:34:40
    二、在入口文件main.js文件里引入echarts。  import echarts from "echarts"  vue.prototype.$echarts = echarts 三、在所需页面按需引入图标表  <template>  <div id="myc...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,846
精华内容 738
关键字:

vue引入echarts

vue 订阅