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 ...
随机推荐
- go https ajax
这个很好用啊,估计大有用武之地 你会喜欢 //https-ajax.go package main import ( "fmt" "io" "net/ ...
- vue中实现浏览器的复制功能
点击复制,就可以实现copy <p class="inline-block"> <span >{{fenxiao.appSecret}}</span& ...
- Unable to update the EntitySet 'T_JsAPI' because it has a DefiningQuery and no <InsertFunction> element exists in the <ModificationFunctionMapping> element to support the current operation.
前几天使用EF6的Db First模式改造了支付中心的数据访问层,废弃了ado.net. 同时,使用T4把实体类生成到了model层的PO目录下. 今天在db里新建了一张表,在edmx文件里更新模型( ...
- phpstudy一系列安装问题
phpStudy是一款PHP调试环境的程序集成包,该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...
- Koa中设置中文Cookie值
默认情况下, 如果 ctx.cookies.set('user', '杨过', { domain: 'xxxx', path: 'xxxx', maxAge: 24 * 60 * 60 * 1000, ...
- 第一章 HTML基本标签
1.HTML:HTML:超文本标签语言(标签又称标记.元素).浏览器:“解释和执行”HTML源码的工具 (运行网页的工具APP).客户端:享受服务的计算机服务器:提供服务的计算机 2.基本框架(网页最 ...
- github上删除一个项目或者reposity
1,点击github的头像,选择如下操作. 2.选择要删除的reposity 3.选择settings 4.复制reposity名字,然后下滑鼠标到底部,选择delete this reposity ...
- CNN超参数优化和可视化技巧详解
https://zhuanlan.zhihu.com/p/27905191 在深度学习中,有许多不同的深度网络结构,包括卷积神经网络(CNN或convnet).长短期记忆网络(LSTM)和生成对抗网络 ...
- uva 1322 Minimizing Maximizer
题意: 有n个数,m个排序器,每个排序器可以把区间ai到bi的数从小到大排序.这m个排序器的输出就是m个排序之后的第n个数. 现在发现有些排序器是多余的.问至少需要多少个排序器可以使得输出不变.排序器 ...
- hihoCoder #1037 : 数字三角形 （动态规划）
题目链接:https://hihocoder.com/problemset/problem/1037# 问题描述 小Hi和小Ho在经历了螃蟹先生的任务之后被奖励了一次出国旅游的机会,于是他们来到了大洋 ...