uni-app中使用echarts 方案分享

下載echarts

然后在需要使用到的頁面引入

我這里是放在components下面

然后在頁面上寫上


option可以自己在文檔上配置自己需要的 配置網址: https://echarts.apache.org/zh/option.html#legend.type

親測有效 app也兼容

兩個文件可以在到HBulder插件市場下載
我這里用的是


下載后解壓

大概這樣就可以了

頁面:

<view class="chart">
  <mpvue-echarts :echarts="echarts" :onInit="onInit" />
</view>


data:
   components: {
		    mpvueEcharts
  },
     echarts,
    onInit:function(canvas, width, height){
    const chart = echarts.init(canvas, null, {
    width: width,
    height: height
    })
    canvas.setChart(chart)
    var option = {
	  type:"plain",
	tooltip: {
	  trigger: "axis"
	},
	legend: {
	  data:["聯合有效算力","獨立有效算力"],
	},
	  color: ["#27B4C3"],
	grid: {
	  top: "15%",
  	left: "12%",
  	right: "6%",
  	bottom: "10%"
	},
	xAxis: {
	  boundaryGap: !1,
	axisTick: {
	  inside: !0,
	  lineStyle: {
  	  color: "#1A1A1A"
  	}
	},
	axisLine: {
	  lineStyle: {
  	  color: "#1A1A1A"
  	}
	},
	  data: ['00:00','02:00','04:00','06:00','08:00','10:00',]
	},
	yAxis: [{
	  name: "TiB",
	  type: "value",
	  axisTick: {
	    show: true
	},
	axisLine: {
	  show: true
	},
	splitLine: {
	  lineStyle: {
  	  type: "dashed",
  	  color: "#E6E6E6"
  	},
	  show: true
	}
	}],
	series: [{
	  name: '聯合有效算力',
	  type: "line",
	  symbol: "none",
	  itemStyle: {
	  color: "#27B4C3"
	},						 
	  data: [50, 200, 306, 100, 100, 200]
	}, {
	  name: '獨立有效算力',
	  type: "line",
	  symbol: "none",
	itemStyle: {
	  color: "#1E90FF"
	},
	  data: [5, 20, 36, 10, 10, 20]
	}]
	}
	  chart.setOption(option)
  	return chart
	},