vue2.0之echarts使用
1.首先下载echart依赖
npm install echarts --save
备注:npm 安装报错时使用cnpm
2.全局注册 在main.js里引入echart并在vue中注册echart
// 引入echarts
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
3.在所使用模块 直接使用$echarts
<script>
methods:{
//绘制线性图
drawLine(id, titleName, gridData, yAxisName, legendData, xAxisData, seriesData) {
this.charts =this.$echarts.init(document.getElementById(id));
this.charts.setOption({
title: {
text: titleName,
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
bottom: '5px',
data: legendData,
},
grid: {
left: '3%',
right: '4%',
bottom: gridData,
top: '60px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData,
},
yAxis: {
type: 'value',
name: yAxisName,
},
series: seriesData
})
}
},
//调用
mounted(){
this.$nextTick(function() {
this.drawLine('lineChart', this.lineChartTitle, '60px', this.lineChartYAxisName,
this.lineChartLegendData, this.lineChartXAxisData,
this.lineChartSeriesData);
});
}
</script>
4.不在main,js引用直接在所使用模块引用
// 在所用模块引入echarts
import echarts from 'echarts';
此时定义echarts时需要将
this.charts =this.$echarts.init(document.getElementById(id)); 中的this.$echarts换成echarts
this.charts = echarts.init(document.getElementById(id));
具体代码如下
<style scoped>
.searchBtn {
width: 100%;
text-align: left;
background: #fbfbfb;
border: none;
border-bottom: 1px solid #eee;
}
.describe {
display: inline-block;
font-weight: bold;
padding: 15px 10px;
}
.changeTab {
color: #10a5f8;
}
.chartBoxs {
width: 100%;
height: 2rem;
margin-top: 10px;
}
</style>
<template>
<div>
<v-head :header_title="title_context"></v-head>
<el-row :gutter="0" style="margin: 10px;">
<el-col :span="24">
<el-button class="searchBtn searchTime" @click='openPicker()'>
<i class="fl el-icon-time"></i>
<span>{{searchTime}}</span>
<i class="fr el-icon-arrow-down"></i>
</el-button>
</el-col>
<el-col :span="24" style="background: white;border-bottom: 1px solid #dadada;">
<span class="describe showMonth fl">{{searchMonth}}月接收/转出情况</span>
<span class="describe changeTab fr" @click='changeTabView()'>{{changeTab}}</span>
</el-col>
<el-col :span="24" style="background: white;">
<div class="chartBoxs" id="lineChart"></div>
</el-col>
</el-row>
<el-row :gutter="0" style="margin: 10px;">
<el-col :span="24" style="background: white;border-bottom: 1px solid #dadada;">
<span class="describe fl">总产量</span>
<span class="describe fr">{{total}}kg</span>
</el-col>
<el-col :span="24" style="background: white;">
<div class="chartBoxs" id="pieChart">
</div>
</el-col>
</el-row>
<template>
<mt-datetime-picker ref="picker" v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm">
</mt-datetime-picker>
</template>
</div>
</template>
<script>
import head from "../../components/head";
import { DatetimePicker } from 'mint-ui';
import moment from 'moment';
// 引入echarts
import echarts from 'echarts';
export default {
data() {
return {
title_context: "成本分析",
searchTime: moment().format('YYYY-MM'),
searchMonth: moment().format('MM'),
changeTab: '切换转出情况',
pickerVisible: '',
total: 3.037,
lineChartTitle: '',
lineChartYAxisName: 'Kg',
lineChartLegendData: ['测转入'],
lineChartXAxisData: ['1日', '5日', '9日', '13日', '17日', '21日', '25日', '29日'],
lineChartSeriesData: [{
name: '测转入',
type: 'line',
data: [220, 182, 191, 234, 290, 360, 310, 290]
}],
chart1: {
chartSeriesData: [{
value: 2.86,
name: '0.5号细针管'
},
{
value: 20,
name: '0.6号细针管'
}
]
}
}
},
components: {
vHead: head,
},
methods: {
//打开时间
openPicker() {
this.$refs.picker.open();
},
//选择时间
handleConfirm(data) {
this.searchTime = moment(data).format('YYYY-MM');
this.searchMonth = moment(data).format('MM');
},
changeTabView() {
if(this.changeTab == "切换转出情况") {
this.changeTab = "切换转入情况";
this.lineChartTitle = '',
this.lineChartYAxisName = 'Kg',
this.lineChartLegendData = ['测转出'],
this.lineChartXAxisData = ['1日', '5日', '9日', '13日', '17日', '21日', '25日', '29日'],
this.lineChartSeriesData = [{
name: '测转出',
type: 'line',
data: [220, 182, 191, 234, 290, 360, 310, 290]
}],
this.chart1 = {
chartSeriesData: [{
value: 2.86,
name: '转出0.5号细针管'
},
{
value: 20,
name: '转出0.6号细针管'
}
]
}
this.drawLine('lineChart', this.lineChartTitle, '60px', this.lineChartYAxisName,
this.lineChartLegendData, this.lineChartXAxisData,
this.lineChartSeriesData);
this.drawPie("pieChart", this.chart1.chartSeriesData);
} else if(this.changeTab == "切换转入情况") {
this.changeTab = "切换转出情况";
this.lineChartTitle = '',
this.lineChartYAxisName = 'Kg',
this.lineChartLegendData = ['测转入'],
this.lineChartXAxisData = ['1日', '5日', '9日', '13日', '17日', '21日', '25日', '29日'],
this.lineChartSeriesData = [{
name: '测转入',
type: 'line',
data: [220, 182, 191, 234, 290, 360, 310, 290]
}],
this.chart1 = {
chartSeriesData: [{
value: 2.86,
name: '转入0.5号细针管'
},
{
value: 20,
name: '转入0.6号细针管'
}
]
}
this.drawLine('lineChart', this.lineChartTitle, '60px', this.lineChartYAxisName,
this.lineChartLegendData, this.lineChartXAxisData,
this.lineChartSeriesData);
this.drawPie("pieChart", this.chart1.chartSeriesData);
}
},
//绘制线性图
drawLine(id, titleName, gridData, yAxisName, legendData, xAxisData, seriesData) {
// this.charts =this.echarts.init(document.getElementById(id));
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
title: {
text: titleName,
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
bottom: '5px',
data: legendData,
},
grid: {
left: '3%',
right: '4%',
bottom: gridData,
top: '60px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData,
},
yAxis: {
type: 'value',
name: yAxisName,
},
series: seriesData
})
},
//绘制环形图表
drawPie(id, chartSeriesData) {
// this.charts =this.echarts.init(document.getElementById(id));
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
show: false,
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%) "
},
legend: {
orient: 'vertical',
x: 'left',
data: ['0.5号细针管', '0.6号细针管']
},
series: [{
type: 'pie',
itemStyle: {
normal: {
label: {
formatter: "{b}\n({d}%) "
}
}
},
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
label: {
formatter: '{b}: {d}'
},
show: true,
textStyle: {
fontSize: '12',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
avoidLabelOverlap: false,
radius: ['50%', '75%'],
center: ['50%', '55%'],
data: chartSeriesData
}]
})
}
},
created() {
},
//调用
mounted() {
this.$nextTick(function() {
this.drawLine('lineChart', this.lineChartTitle, '60px', this.lineChartYAxisName,
this.lineChartLegendData, this.lineChartXAxisData,
this.lineChartSeriesData);
this.drawPie("pieChart", this.chart1.chartSeriesData);
});
}
}
</script>
vue2.0之echarts使用的更多相关文章
- 基于vue2.0的后管系统（配置篇）
一些项目依赖package.json { "name": "frontend", "description": "tssp bas ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616 小提示 ...
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- 一步步构造自己的vue2.0+webpack环境
前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- 基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...
随机推荐
- Django Form(表单）
前台用 get 或 post 方法向后台提交一些数据. GET方法: html示例(保存在templates文件夹中): <!DOCTYPE html> <html> < ...
- selenium获取文本
# 标题list_title = driver.find_elements_by_xpath('//*[@id="share-content"]/div/div[1]/ul/li/ ...
- jquery $.ajax $.get $.post的区别？
$.ajax 是 jQuery 底层 AJAX 实现,$.ajax是一种通用的底层封装,$.ajax()请求数据之后,则需要使用回调函数,有beforeSend.error.dataFilter.su ...
- MySQL编码问题探究
占个坑. 今天在向本机搭建的MySQL数据库插入中文的时候报错了. 使用 show variables like 'char%'; 及 show variables like 'collation%' ...
- Day7 错误和异常
一.异常 1.异常基础 1.为了让我们的代码在出现异常的时候,整个项目依然是可以正常运行的,所以我们引入了异常处理机制! 2.在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户 ...
- 擠出線寬(Extrusion width)，要怎麼設定?
擠出線寬(Extrusion width),要怎麼設定? Slic3r的作者,把這邊的%設定,跟"層高"做連結.我個人認為擠出線寬,要以噴頭孔徑當做設定參考才好.層高應該只要設定成 ...
- Yii2 Restful api设计--App接口编程
Yii2框架写一套RESTful风格的API,对照魏曦教你学 一,入门 一.目录结构 实现一个简单地RESTful API只需用到三个文件.目录如下: frontend ├─ config │ └ m ...
- python 文件描述符
先上一张图 文件描述符是内核为了高效管理已经被打开的文件所创建的索引, ----非负整数 ----用于指代被打开的文件 ----所有执行i/o操作的系统调用都是通过文件描述符完成的 进程通过文件描述符 ...
- Njinx配置
参考地址: NGINX的百度百科:https://baike.baidu.com/item/nginx/3817705?fr=aladdin NGINX的中文网站:http://www.nginx.c ...
- Linux基础命令---文本过滤colrm
colrm 从标准输入读取数据,删除指定的列,然后送到标准输出.如果用一个参数调用,则将从指定的列开始删除每一行的列.如果使用两个参数调用,则将删除从第一列到最后一列的列.列编号以第1列开始. 此命令 ...