基于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 相关文章推荐
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
JS中的防抖与节流及作用详解
Apr 01 Javascript
深入浅析vue中cross-env的使用
Sep 12 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP脚本的10个技巧(2)
2006/10/09 PHP
PHP 模板高级篇总结
2006/12/21 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
原生javascript实现隔行换色
2015/01/04 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python中base64加密解密方法实例分析
2015/05/16 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
详解python中的 is 操作符
2017/12/26 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
Ajax的工作原理
2015/12/04 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
合作合同协议书范本
2015/01/27 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
食品安全责任书范本
2015/05/09 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
Python 数据可视化之Bokeh详解
2021/11/02 Python