怎么在mpvue小程序使用echarts画折线图

  介绍

这期内容当中小编将会给大家带来有关怎么在mpvue小程序使用echarts画折线图、文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

<强>关于组件的选择:

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

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

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

<强> mpvue-echarts配合echarts的使用

下载相关包

npm  install  mpvue-echarts ——保存

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

vue文件中使用模板:

& lt; mpvue-echarts : echarts=癳charts",: onInit=癷nitChart", canvasId=癲emo-canvas",/在

js:

import  mpvueEcharts 得到& # 39;mpvue-echarts& # 39;;      let  echarts =,要求(“. ./. ./. ./静态/lib/echarts.min.js");,//按需下载的压缩文件放在项目文件夹中   import  charts 得到& # 39;。/图表# 39;,,//本地mixin文件,图表的所有配置      let  chart =,空;   export  default  {   ,数据(){   ,return  {   echarts才能,   ,};   },   ,async 安装(),{   ,let  data =, await 文章(“/产品/marketInfo", {   ,});      ,this.initCombineLineData (data.trendData);   ,chart.setOption (this.trendChart);      },   ,mixin:[图表],   ,方法:{   ,initChart(画布,,宽度,高度),{   chart 才能=,echarts.init(画布,,null,, {   ,,,宽度:宽度,   ,,身高:高度   ,,});   canvas.setChart才能(图);   chart.setOption才能(this.trendChart);   return 才能;图表;      ,}   },   ,组件:{   ,mpvueEcharts   ,}   }

图表。js文件

export  default  {   ,数据(){   ,return  {   ,//趋势图   ,,trendChart: {   ,,网格:{   ,,,左:& # 39;左# 39;   ,,:,50岁,   ,,,containLabel:没错,   ,,,提示:{   ,,,新型:,& # 39;没有# 39;   ,,,showConent:,真的,   ,,,位置:,function  (pt), {   ,,,return  [pt [0], pt [1] -50];   ,,,}   ,,}   ,,},   ,,提示:{   ,才能触发:,“none"   ,,,showContent:假的,   ,,},   ,,textStyle: {   ,,,颜色:“# 999“,   ,,字形大小:24   ,,},   标签:,{才能   ,,字形大小:22   ,,},   ,,xAxis: {   ,,,的名字:“年份“,   ,,,类型:“category",   ,,nameGap: 10,,//坐标轴名称与轴线之间的距离。   ,,,boundaryGap:真的,,//坐标轴两边留白策略   ,,nameTextStyle:{,//坐标轴名称样式   ,,,颜色:“# 999“,   ,,,字形大小:,12日   ,,,:对齐,& # 39;左# 39;   ,,,verticalAlign:, & # 39;底部# 39;   ,,},   ,,,axisLine:{,//坐标轴轴线相关设置   ,,,表明:真的,,//是否显示坐标轴轴线。   ,,象征:[& # 39;没有# 39;& # 39;箭头# 39;],,//轴线两边的箭头默认不显示箭头,即,& # 39;没有# 39;。两端都显示箭头可以设置为,& # 39;箭头# 39;,只在末端显示箭头可以设置为,(& # 39;没有# 39;,,& # 39;箭头# 39;]。   ,,,symbolSize:[10 8],//轴线两边的箭头的大小   ,,,symbolOffset:[0, 5],//轴线两边的箭头的偏移   ,,,线型:{   ,,,颜色:,“# ece9e2",//线条颜色   ,,},   ,,},   ,,,axisTick:{,//坐标轴刻度相关设置   ,才能表明:假   ,,},   ,,,axisLabel:{,//坐标轴刻度标签的相关设置   ,,,间隔:10000年,   ,,,showMinLabel:没错,   ,,,showMaxLabel:没错,   ,,,字形大小:12,   ,,,填充:[6,,0,0,0)   ,,},   ,,,axisPointer:{,//坐标轴指示器配置项   ,,,的值:,& # 39;& # 39;   ,,,急,,真的,   ,,,类型:,& # 39;行# 39;,,//指示器类型   ,,,显示:,假的,,//竖线是否显示,作用于每一个点   ,,,线型:,{   ,,,,颜色:,& # 39;# ece9e2& # 39;   ,,,,宽度:1   ,,,},   ,,,标签:,{,//坐标轴指示器的文本标签   ,,,,显示:,假的,   ,,,},   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

怎么在mpvue小程序使用echarts画折线图