基于mpvue小程序使用echarts画折线图的方法示例

npm install mpvue-echarts --save

<mpvue-echarts :echarts="echarts" :onInit="initChart" canvasId="demo-canvas" />

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
 }
}

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);

 }
 },
 }
};