這期內(nèi)容當中小編將會給大家?guī)碛嘘P怎么在mpvue小程序使用echarts畫折線圖，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到圖木舒克網(wǎng)站設計與圖木舒克網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋圖木舒克地區(qū)。

關于組件的選擇：

1.echarts-for-weixin,官方echarts的小程序版本。使用參考：echarts-for-weixin介紹，如果你是原生開發(fā)小程序版本，這個組件非常適合你，開發(fā)過程中可使用echarts官方提供的所有配置和Api,但并不適合mpvue項目。

2、wx-charts,一個個人開發(fā)的微信小程序圖表插件，體積只有30K,可用于mpvue項目和原生小程序項目,支持大部分圖表繪制，缺點是可配置化不強，對于UI沒有太大要求的可使用此組件，比較適合于個人項目開發(fā)。

3、mpvue-echarts與echarts結合。特別適合mpvue項目,mpvue-echarts是一個基于mpvue開發(fā)的echarts組件，echarts的加入可完全使用官方所有的圖表繪制功能，讓echarts在小程序當中得到全部應用。

mpvue-echarts配合echarts的使用

下載相關包

npm install mpvue-echarts --save

echarts的下載可到官網(wǎng)上下載，由于小程序中對文件大小有限制，建議通過勾選所需要的功能按需下載。

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: { //拖拽手柄，適用于觸屏的環(huán)境
     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: {
     //網(wǎng)絡線設置（只作用于非類目鈾）
     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' //折線上不顯示轉(zhuǎn)折點
    };
    if(i== data.length-1){
     yData.symbol = "emptyCircle", //最后一個顯示轉(zhuǎn)折點
     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畫折線圖了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前標題：怎么在mpvue小程序使用echarts畫折線圖-創(chuàng)新互聯(lián)
瀏覽路徑：http://jinyejixie.com/article12/ghsdc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、用戶體驗、App開發(fā)、網(wǎng)站制作、網(wǎng)站營銷、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)