一、先说在原生里怎么使用echarts

<!-- 1.引入echarts文件 -->
　　<script src="echarts.min.js"></script>
<!-- 准备容器 -->
　　<div style="width: 600px;height:400px;" id="main"></div>
//基于dom，初始化echarts实例
　　var myChart = echarts.init(document.getElementById('main'))
//制定图表的配置项和数据
　　var option = { }
//使用配置项显示图表
　　myChart.setOption(option)
 
二、在vue中使用vue-echarts
// 引入vue-echarts
　　import ECharts from 'vue-echarts/components/ECharts.vue'
　　import 'echarts/lib/chart/line'
　　import 'echarts/lib/component/tooltip'
　　Vue.component('chart', ECharts)
//在build/webpack.base.conf.js中修改成如下东西 {
        test: /\.js$/,

        loader: 'babel-loader',

+       include: [

+         resolve('src'),

+         resolve('test'),

+         resolve('node_modules/vue-echarts'),

+         resolve('node_modules/resize-detector')

+       ]

 }
//在.vue文件中使用
　　<div class="left-bottom">
　　　　<div class="title">系统访问量</div>
　　　　<chart style="width: 100%;height: 13rem;position: absolute;top: -2%;" :options="line"></chart>
　　</div>
　　//配置
　　line: {
        legend: { // 图例组件颜色配置
          data: [
            {name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},
            {name: '一二三四五六  ', icon: 'circle', textStyle: {color: '#fff'}},
            {name: '一二三四五六   ', icon: 'circle', textStyle: {color: '#fff'}},
            {name: '一二三四五六    ', icon: 'circle', textStyle: {color: '#fff'}}
          ]
        },
        grid: { // 网格
          left: '-2.3%',
          right: '1.6%',
          bottom: '10%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          splitLine: { // 保留网格线
            show: true,
            lineStyle: {
              color: '#666'
            }
          },
          splitArea: { // 去除网格区域
            show: false,
            lineStyle: {
              color: '#666'
            }
          },
          type: 'category',
          boundaryGap: false,
          axisLine: { // 坐标轴
            lineStyle: {
              color: '#ccc'
            }
          },
          axisTick: { // 坐标轴刻度设置
            inside: true,
            interval: 0
          },
          axisLabel: {
            interval: 0,
            fontSize: 8
          },
          data: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00',  '20:00', '21:00', '22:00', '23:00', '24:00', '01:00', '02:00', '03:00', '04:00', '05:00', '']
 
        },
        yAxis: {
          min: 1000,
          splitLine: { // 保留网格线
            show: true,
            lineStyle: {
              color: '#666'
            }
          },
          splitArea: { // 去除网格区域
            show: false,
            lineStyle: {
              color: '#666'
            }
          },
          type: 'value',
          axisLabel: {
            interval: '0',
            fontSize: 8.5
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisTick: {
            inside: true
          },
          data: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000]
        },
        series: [
          {
            name: '一二三四五六 ',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 7,
            itemStyle: {
              normal: {
                color: '#00ff7e',
                lineStyle: {
                  color: '#00ff7e'
                }
              }
            },
            data: [1700, 1720, 1010, 1340, 900, 2300, 2100, 1500]
          },
          {
            name: '一二三四五六  ',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 7,
            itemStyle: {
              normal: {
                color: '#0060ff',
                lineStyle: {
                  color: '#0060ff'
                }
              }
            },
            data: [1200, 1820, 1910, 2304, 2090, 3040, 3010, 3000]
          },
          {
            name: '一二三四五六   ',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 7,
            itemStyle: {
              normal: {
                color: '#00ccff',
                lineStyle: {
                  color: '#00ccff'
                }
              }
            },
            data: [1500, 2320, 2010, 1054, 1900, 3300, 3100, 3500]
          },
          {
            name: '一二三四五六    ',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 7,
            itemStyle: {
              normal: {
                color: '#ffae00',
                lineStyle: {
                  color: '#ffae00'
                }
              }
            },
            data: [1200, 3320, 301, 3304, 3900, 330, 3200, 3050]
          }
        ]
      }
 
 
 
line2: {
legend: { // 图例组件颜色配置
data: [
{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},
{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},
{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},
{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}}
]
},
grid: { // 网格
left: '-2.3%',
right: '1.6%',
bottom: '10%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
splitLine: { // 保留网格线
show: true,
lineStyle: {
color: '#666'
}
},
splitArea: { // 去除网格区域
show: false,
lineStyle: {
color: '#666'
}
},
type: 'category',
boundaryGap: false,
axisLine: { // 坐标轴
lineStyle: {
color: '#ccc'
}
},
axisTick: { // 坐标轴刻度设置
inside: true,
interval:
},
axisLabel: {
interval: ,
fontSize:
},
data: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00', '01:00', '02:00', '03:00', '04:00', '05:00', '']
},
yAxis: {
min: ,
splitLine: { // 保留网格线
show: true,
lineStyle: {
color: '#666'
}
},
splitArea: { // 去除网格区域
show: false,
lineStyle: {
color: '#666'
}
},
type: 'value',
axisLabel: {
interval: '0',
fontSize: 8.5
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
inside: true
},
data: [, , , , , , , , ]
},
series: [
{
name: '一二三四五六 ',
type: 'line',
stack: '总量',
symbol: 'none',
itemStyle: {
normal: {
color: 'rgba(0, 254, 116, 0.3)',
lineStyle: {
color: '#00ff7e'
}
}
},
areaStyle: {normal: {}},
data: [, , , , , , , , ]
},
{
name: '一二三四五六 ',
type: 'line',
stack: '总量',
symbol: 'none',
itemStyle: {
normal: {
color: 'rgba(0, 109, 255, 0.3)',
lineStyle: {
color: '#0060ff'
}
}
},
areaStyle: {normal: {}},
data: [, , , , , , , , ]
},
{
name: '一二三四五六 ',
type: 'line',
stack: '总量',
symbol: 'none',
itemStyle: {
normal: {
color: 'rgba(0, 204, 255, 0.3)',
lineStyle: {
color: '#00ccff'
}
}
},
areaStyle: {normal: {}},
data: [, , , , , , , , ]
},
{
name: '一二三四五六 ',
type: 'line',
stack: '总量',
symbol: 'none',
itemStyle: {
normal: {
color: 'rgba(255, 174, 0, 0.3)',
lineStyle: {
color: '#ffae00'
}
}
},
areaStyle: {normal: {}},
data: [, , , , , , , , ]
}
]
}

vue中使用vue-echarts的更多相关文章

  1. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  2. vue中如何使用echarts

    在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新 主要是以下几步: echarts的option配置项放在在data(){}或者computed(){}中 在 ...

  3. Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  4. 在vue中使用的Echarts的步骤

    1.首先在项目中安装Echarts npm install echarts -g --save //安装 2.在项目中引入Echarts(在main.js中引入) import echarts fro ...

  5. 关于vue中如何配置echarts以及使用方法

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  6. vue中如何使用echarts,使用axios获取数据

    1==>首先准备一个容器 <div id="echartContainer" style="width:400px; height:400px"&g ...

  7. vue中动态设置echarts画布大小

    document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...

  8. vue中，基于echarts 地图实现一个人才回流的大数据展示效果

    0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...

  9. Vue中使用Vue.component定义两个全局组件，用单标签应用组件时，只显示一个组件的问题和 $emit的使用。

    解决方法: 定义了两个 Vue.component 在 el 中使用的时候要用 双标签, 用单表标签的时候,只会显示第个 组件间 这样写只显示 welcome-button 组件 <welcom ...

  10. vue中使用定时器时this指向问题

    在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...

随机推荐

  1. day30 python类的继承，抽象类等

    Python之路,Day17 = Python基础17-面向对象入门 继承 class Student(People): pass print(Student.__bases__) # 查看 Stud ...

  2. 组合数学——cf991E

    /* 如果有某一位,那么这一位必须存在 枚举所有情况,计算每种情况时0额外另算 */ #include<bits/stdc++.h> using namespace std; #defin ...

  3. Linux下编译VLC for Android源代码总结

    转:http://blog.chinaunix.net/uid-26611383-id-3678766.html 由于项目需要,需要一个在android平台能够支持RTSP协议的播放器,由于之前没有a ...

  4. 08_springboot2.x自定义starter

    概述 starter:启动器 1.这个场景需要使用到的依赖是什么? 2.如何编写自动配置 规则: @Configuration //指定这个类是一个配置类 @ConditionalOnXXX //在指 ...

  5. 《初识Python之认识常量type函数》

    <初识Python之认识常量type函数> 1.2 认识常量 1.常量:我们用的就是它字面意义上的值或内容. 2.数字(Number) (1)整数表示:97. (2)浮点数表示:5.29 ...

  6. Censored! POJ - 1625 AC自动机+大数DP

    题意: 给出一n种字符的字典,有p个禁用的单词, 问能组成多少个不同的长度为m的合法字符串.(m<=50) 题解: 是不是个我们之前做的题目非常非常像,题意都一样. 直接将上次写的AC自动机+矩 ...

  7. [转]Hessian——轻量级远程调用方案

    Hessian是caucho公司开发的一种基于二进制RPC协议(Remote Procedure Call protocol)的轻量级远程调用框架.具有多种语言的实现,但用的最多的当然是Java实现 ...

  8. 多线程MT和多线程MD的区别

    这段时间司在招实习生,而不管是远程的电话面试或者是实际现场面试中领导都喜欢问你这个问题,但是可惜的是能很好答上来的人很少.后来发现不管是应届的实习生,甚至有些实际参加工作几年的人也未必真的了解这个问题 ...

  9. 并发和多线程(九)--AbstractQueuedSynchronizer排他锁基本原理

    AbstractQueuedSynchronizer简称为AQS,AQS是ReentrantLock.CountdownLatch.CycliBarrier等并发工具的原理/基础,所以了解AQS的原理 ...

  10. html+css简单的实现360搜索引擎首页面

    今天主要学习了是如何实现的,以及我在写这个页面的时候我所遇到的一些困难. 主要实现是用代码的,不说废话了,其实我是想说我走的坑有哪些. 1.代码的基础不好,元素的一些属性不熟悉,对于HTML和css还 ...