基于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代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
vue-router 中 meta的用法详解
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下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
JavaScript控制Session操作方法
2013/01/17 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
js制作提示框插件
2020/12/24 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
党课学习思想汇报
2014/01/02 职场文书
新店开张活动方案
2014/08/24 职场文书
异地年检委托书范本
2014/09/24 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
推荐信范文大全
2015/03/27 职场文书
答谢酒会主持词
2015/07/02 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python