辽宁十一选五一定牛 辽宁十一选五推荐号码预测专家今日 辽宁十一选五六月走势分析预测 哪个平台有辽宁十一选五开奖结果 辽宁十一选五六码遗漏 辽宁十一选五公告 辽宁十一选五前三技巧 辽宁十一选五任选四最大遗漏 辽宁十一选五小助手 辽宁十一选五360 辽宁十一选五组二技巧 辽宁十一选五推荐号码 辽宁十一选五计划软件手机版 辽宁十一选五连线走势图百度乐彩 辽宁十一选五玩法
用户
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 查看内容

基于mpvue小程序使用echarts画折线图

Rolan 2019-4-25 00:48

第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择。关于组件的选择:1.echarts- ...

第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择。

关于组件的选择:

1.echarts-for-weixin,官方echarts的小程序版本。使用参考:echarts-for-weixin介绍,如果你是原生开发小程序版本,这个组件非常适合你,开发过程中可使用echarts官?#25945;?#20379;的所?#20449;?#32622;和Api,但并不适合mpvue项目。

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

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

mpvue-echarts配合echarts的使用

下载相关包

npm install mpvue-echarts --save

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

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文件,图表的所?#20449;?#32622;

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: { //坐标轴刻?#32570;?#31614;?#21335;?#20851;设置
            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: { //拖拽?#30452;?#36866;用于触屏的环境
                  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);

          }
      },
  }
};

最终效果

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: emcty 来自: segmentfault
辽宁十一选五平台
辽宁十一选五一定牛 辽宁十一选五推荐号码预测专家今日 辽宁十一选五六月走势分析预测 哪个平台有辽宁十一选五开奖结果 辽宁十一选五六码遗漏 辽宁十一选五公告 辽宁十一选五前三技巧 辽宁十一选五任选四最大遗漏 辽宁十一选五小助手 辽宁十一选五360 辽宁十一选五组二技巧 辽宁十一选五推荐号码 辽宁十一选五计划软件手机版 辽宁十一选五连线走势图百度乐彩 辽宁十一选五玩法
英雄联盟av mg电子什么游戏好上分 百人牛牛怎么玩 德国美因茨大学药 奇迹觉醒有电脑版吗 西甲阿拉维斯vs莱加内斯 纽卡斯尔大学排名 白狮电子 女巫宝藏送彩金