echarts在vue里面使用,以及基础配置。
基础的图表和基础的配置。 效果图如下:
1、安装图表依赖包:npm install echarts
2、在main.js里面 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、直接使用,配置和代码如下。
<template>
<div class="box">
<div id="myChart" :style="{width: '800px', height: '400px'}"></div>
</div>
</template> <script>
export default {
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('myChart'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
//提示框组件,专门配置提示框的。
tooltip: {
trigger:'axis',
// 坐标轴指示器配置项。
axisPointer:{
type:'cross', //指示器样试
}
},
//工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
toolbox:{
feature:{
// 动态类型切换,切换图表
magicType: {
type: ['line', 'bar', ]
},
//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
dataView:{
show:true, //是否显示 数据示图
readOnly:false, //是否 直接可以编辑数据。
},
//保存为图片的配置
saveAsImage: {
show: true
},
//配置项还原
restore: {show: true},
}
},
//图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
legend:{
data:['实体查阅','电子查阅'] //对应的是name
},
//配置X轴
xAxis: {
//坐标轴类型
type:'category',
//配置类目名称。 可以逐一设置,具体看文档
data: ['一月', '二月', '三月', '四月', '五月', '六月','七月','八月','九月','十月','十一月','十二月'],
//配置 鼠标移入时显示的 阴影指示器'line' 直线指示器 'shadow' 阴影指示,器 'none' 无指示器
axisPointer: {
show:true, //show 必须写,开关的作用
type: 'shadow'
}
},
//配置Y轴
yAxis: [
{
type: 'value', //坐标轴类型
name: '实体查阅', //名称
min: 0, //最小值
max: 100, //最大值
interval: 10, //列数
axisLabel: { //坐标轴刻度标签的相关设置。
formatter: '{value}人' //字符串模板
}
},
],
//系列列表。每个系列通过 type 决定自己的图表类型,一个对象表示一个列表
series: [
{
name: '实体查阅',
type: 'bar',
data: [15, 25, 40, 20, 20, 22,23,44,42,25,32,45],
itemStyle:{ //图形的颜色。默认指向全局的option.color
color:'#F60'
}
},
{
name: '电子查阅',
type: 'line',
data: [45, 54, 66, 50, 40, 32,43,76,65,55,87,75]
}
],
//图表的颜色
color:['#CCC','#AFA', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
});
//鼠标事件
myChart.on('click',function(params){
console.log(params)
})
}
},
} </script> <style scoped>
.box{
margin-top:50px;
}
</style>
4、饼图配置和说明,以及效果图
<template>
<div class="box">
<div id="pieChart"></div>
</div>
</template> <script>
export default {
mounted(){
this.chartFn()
},
methods:{
chartFn(){
// 基于准备好的dom,初始化echarts实例
var pieChart = this.$echarts.init(document.getElementById('pieChart'));
pieChart.setOption({
title:{
text:'饼图', //标题
subtext: '练习专用', //副标题
x:'center' // 位置
},
legend: {
orient: 'vertical', //图例列表的布局朝向。
left: 'left', //距离左侧的距离
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie', //类型
radius : '60%', //饼图的半径
center: ['50%', '60%'], //饼图位置的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
}
]
})
}
}
}
</script> <style scoped>
.box{
margin-top:50px;
}
#pieChart{
width:500px;
height:500px;
}
</style>
echarts在vue里面使用,以及基础配置。的更多相关文章
- 01-flask电商项目开发基础配置
本项目前端采用vue-cli的脚手架,后端采用Flask的Web框架.项目通过完成用户管理.权限管理.商品管理.订单管理.统计管理等功能,综合了前后端的知识,希望使大家都能受益. 1.使用到的技术如下 ...
- vue详细操作目录-基础篇
目录结构:-lib-main.js -lib-vue.js index.html 每个网页第一个均为HTML页面,第二个为js文件(主要文件) 1.vue的安装以及语法介绍 2.v-for指令 3.v ...
- DRF框架 之基础配置
Vue框架的总结 """ 1.vue如果控制html 在html中设置挂载点.导入vue.js环境.创建Vue对象与挂载点绑定 2.vue是渐进式js框架 3.vue指令 ...
- webpack(11)配置文件分离为开发配置、生成配置和基础配置
前言 上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境 webpac ...
- StackExchange.Redis帮助类解决方案RedisRepository封装(基础配置)
本文版权归博客园和作者吴双本人共同所有,转载和爬虫,请注明原文地址.http://www.cnblogs.com/tdws/p/5815735.html 写在前面 这不是教程,分享而已,也欢迎园友们多 ...
- Hibernate 基础配置及常用功能(三)
本章重点讲述Hibernate对象的三种状态以及如何配置二级缓存 有关Hibernate的三种状态如何相互转换网上都能查到,官方文档描述的也比较详细.这里主要是针对几个重点方法做代码演示. 一.状态转 ...
- Emacs学习心得之 基础配置
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础配置 1.前言2.基础配置 一.前言 本篇博文记录了Emacs的一 ...
- nginx 的基础配置[转]
nginx 的基础配置 分类: 工具软件2013-11-13 23:26 11人阅读 评论(0) 收藏 举报 目录(?)[-] 管理配置文件 全局配置 虚拟机server配置 location配置 ...
- freeRadius 基础配置及测试
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...
- Oracle 10g DataGuard手记之基础配置
DataGuard为企业数据的高可用性,数据安全以及灾难恢复提供支持,一般由一个primary db与几个物理或逻辑standby db组成一个DataGuard配置. 系统环境 操作系统为windo ...
随机推荐
- 【JNI探索之路系列】之七:JNI要点总结
作者:郭嘉 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells github:https://github.com/AllenWells ...
- Java图形界面(GUI)——如何将JTable成功放入面板
在这次课程设计中,大部分内容都设计的很流畅,没有遇到太大的问题,但在面板中加入JTable时确实花费了一部分时间,在此将解决办法总结出来: 定义控件: JPanel panel = new JPane ...
- 用树莓派实现RGB LED的颜色控制——C语言版本号
用树莓派实现RGB LED的颜色控制 RGB色彩模式是工业界的一种颜色标准.是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代 表红.绿 ...
- bind(),call(), apply()方法的区别是什么?
bind(),call(), apply()方法的区别是什么? 共同点:改变this指向,任何调用都不在起作用 bind() 改变this的指向,不会调用函数,返回一个新的函数 var o ={a:' ...
- SwiftUI 官方教程(五)
SwiftUI官方教程(五) 5. 同时使用 UIKit 和 SwiftUI 至此,我们已准备好创建 map view 了,接下来使用 MapKit 中的 MKMapView 类来渲染地图. 在 Sw ...
- Python+unittest 接口自动化测试
1.封装get.post#!/usr/bin/env python3# -*- coding: utf-8 -*- __author__ = 'hualai yu' import requests c ...
- D - Knight Tournament(set)
Problem description Hooray! Berl II, the king of Berland is making a knight tournament. The king has ...
- 安装windwos7 iis 出现错误,并非所有都成功更改的解决办法
1.首先排除网上说的 安装的WIN7是精简版的问题,我这个是旗舰版,以前是正常安装IIS的,后来程序问题我卸载了,就安装不上了 2.网上说的修改什么UAC权限,也是胡扯,因为默认都是最低的 3.排除网 ...
- BZOJ1060: [ZJOI2007]时态同步(树形dp 贪心)
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3285 Solved: 1286[Submit][Status][Discuss] Descript ...
- jQuery操作样式知识总结
css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使用案例 $(&qu ...