基于mpvue小程序使用echarts画折线图的方法示例


Posted in Javascript onApril 24, 2019

第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择。

关于组件的选择:

1.echarts-for-weixin,官方echarts的小程序版本。使用参考:echarts-for-weixin介绍,如果你是原生开发小程序版本,这个组件非常适合你,开发过程中可使用echarts官方提供的所有配置和Api,但并不适合mpvue项目。

2、wx-charts,一个个人开发的微信小程序图表插件,体积只有30K,可用于mpvue项目和原生小程序项目,支持大部分图表绘制,缺点是可配置化不强,对于UI没有太大要求的可使用此组件,比较适合于个人项目开发。

3、mpvue-echarts与echarts结合。特别适合mpvue项目,mpvue-echarts是一个基于mpvue开发的echarts组件,echarts的加入可完全使用官方所有的图表绘制功能,让echarts在小程序当中得到全部应用。

mpvue-echarts配合echarts的使用

下载相关包

npm install mpvue-echarts --save

echarts的下载可到官网上下载,由于小程序中对文件大小有限制,建议通过勾选所需要的功能按需下载。

vue文件中使用

template:

<mpvue-echarts :echarts="echarts" :onInit="initChart" canvasId="demo-canvas" />

js:

import mpvueEcharts from 'mpvue-echarts';

let echarts = require("../../../static/lib/echarts.min.js"); //按需下载的压缩文件放在项目文件夹中
import charts from './charts'; //本地mixin文件,图表的所有配置

let chart = null;
export default {
 data() {
 return {
  echarts,
 };
 },
 async mounted() {
 let data = await post("/product/marketInfo",{
 });

 this.initCombineLineData(data.trendData);
 chart.setOption(this.trendChart);

 },
 mixins: [charts],
 methods: {
 initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
   width: width,
   height: height
  });
  canvas.setChart(chart);
  chart.setOption(this.trendChart);
  return chart;

 }
 },
 components: {
 mpvueEcharts
 }
}

charts.js文件

export default {
 data() {
 return {
  //trend图
  trendChart: {
  grid: {
   left: 'left',
   top: 50,
   containLabel: true,
   tooltip: {
    triggerOn: 'none',
    showConent: true,
    position: function (pt) {
    return [pt[0], pt[1]-50];
    }
   }
  },
  tooltip: {
   trigger: "none",
   showContent: false,
  },
  textStyle: {
   color: "#999",
   fontSize: 24
  },
  label: {
   fontSize: 22
  },
  xAxis: {
   name: "年份",
   type: "category",
   nameGap:10, //坐标轴名称与轴线之间的距离。
   boundaryGap: true, //坐标轴两边留白策略
   nameTextStyle:{ //坐标轴名称样式
    color:"#999",
    fontSize: 12,
    align: 'left',
    verticalAlign: 'bottom'
   },
   axisLine: { //坐标轴轴线相关设置
   show: true, //是否显示坐标轴轴线。
   symbol: ['none','arrow'], //轴线两边的箭头默认不显示箭头,即 'none'。两端都显示箭头可以设置为 'arrow',只在末端显示箭头可以设置为 ['none', 'arrow']。
   symbolSize: [10,8],//轴线两边的箭头的大小
   symbolOffset: [0,5],//轴线两边的箭头的偏移
   lineStyle: {
    color: "#ece9e2",//线条颜色
   },
   },
   axisTick: { //坐标轴刻度相关设置
   show: false
   },
   axisLabel: { //坐标轴刻度标签的相关设置
   interval: 10000,
   showMinLabel: true,
   showMaxLabel: true,
   fontSize: 12,
   padding: [6, 0, 0, 0]
   },
   axisPointer: { //坐标轴指示器配置项
    value: '',
    snap: true,
    type: 'line', //指示器类型
    show: false, //竖线是否显示,作用于每一个点
    lineStyle: {
     color: '#ece9e2',
     width: 1
    },
    label: { //坐标轴指示器的文本标签
     show: false,
    },
    handle: { //拖拽手柄,适用于触屏的环境
     show: true,
     color: 'none'
    }
   },
   data: []
  },
  yAxis: {
   type: "value",
   name: "价格(元)",
   nameGap: 0,
   nameTextStyle:{
    color:"#999",
    fontSize: 12,
    align: 'right',
    verticalAlign: 'top',
    padding: [0,0,10,60]
   },
   axisLine: {
   show: true,
   length: 100,
   symbol: ['none','arrow'],
   symbolSize: [10,8],
   symbolOffset: [0,5],
   lineStyle: {
    color: "#ece9e2",
   },

   },
   axisLabel: {
   fontSize: 12,
   formatter: value => {
    return value;
   }
   },
   axisTick: {
   show: false
   },
   splitLine:{
    lineStyle: {
     //网络线设置(只作用于非类目铀)
     show: true,
     color: "#ece9e2",
     width: 0.5,
     type: "solid"
    },
   },
   splitNumber: 5,
   min: 0,
   max: 4000,
   interval: 1000
  },
  series: [
   {
   type: "line",
   smooth: false,
   color: "#ca3c2e",
   showSymbol: true,
   lineStyle: {
    width: 1.5,
    color: "#c5936e",
   },
   itemStyle: {
    normal:{
     borderWidth: 0.5,
     label:{
      show: true, //显示值
      borderWidth: 2,
      color: '#c5936e',
      fontSize: 12,
     }
    }
   },
   data: []
   },
  ]
  },
 };
 },
 methods: {
  initCombineLineData(data) {
   this.trendChart.xAxis.axisPointer.value = data[data.length-1].date; //让指示器定位在最后一个折线点上
   for(let i=0;i<=data.length;i++){
    let yData = {
     symbol: 'none' //折线上不显示转折点
    };
    if(i== data.length-1){
     yData.symbol = "emptyCircle", //最后一个显示转折点
     yData.symbolSize = 6
    }
    yData.value = data[i].price;

    this.trendChart.xAxis.data.push(data[i].date);
    this.trendChart.series[0].data.push(yData);

   }
  },
 }
};

最终效果

基于mpvue小程序使用echarts画折线图的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
angular.element方法汇总
Jan 07 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
详解微信小程序开发用户授权登陆
Apr 24 #Javascript
微信小程序实现的一键拨号功能示例
Apr 24 #Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 #Javascript
微信小程序实现的图片保存功能示例
Apr 24 #Javascript
vue中的inject学习教程
Apr 24 #Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 #Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 #Javascript
You might like
PHP 图片文件上传实现代码
2010/12/29 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
javascript 跳转代码集合
2009/12/03 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
JavaScript实现区块链
2018/03/14 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
Python魔术方法详解
2015/02/14 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python获取引用对象的个数方式
2019/12/20 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
2015年法务工作总结范文
2015/05/23 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python