您好,登錄后才能下訂單哦!
這期內容當中小編將會給大家帶來有關怎么在mpvue小程序使用echarts畫折線圖,文章內容豐富且以專業的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
關于組件的選擇:
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畫折線圖了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。