vue项目中使用Echarts的一些总结，包括饼图，折现图，折柱混图，年月日切换

先奉上官网地址&＃xff0c;一切以官网为主

Echrts官网

Echarts的基本使用

• 安装

cnpm i echarts -S


• 全局使用
  在main.js中引入,然后用变量&＃xff0c;将其挂载到vue的原型上

import echarts from &＃39;echarts&＃39;
Vue.prototype.$echarts &＃61; echarts


在组件中&＃xff0c;就可以直接使用

this.$echarts.init()


稍后会说按需引入

下面来说一个我在项目中的总结

先看这个图 折柱混合

• 首先是对数据的处理
  我们首先是要在页面画这么一个图&＃xff0c;那么肯定是在mounted中执行的&＃xff0c;但是画你得有数据&＃xff0c;所有就把请求图表数据的方法&＃xff0c;放在请求整体页面方法之后&＃xff0c;然后把数据&＃xff0c;当参数整体传给画图方法
  
• 下面就是使用map方法&＃xff0c;对传入的数据&＃xff0c;进行填充渲染

weeklyEcharts(data) { // 形参接收数据let myEchartWeekly &＃61; this.$echarts.init(document.getElementById("weeklyEcharts"));let optionWeekly &＃61; {tooltip: {trigger: "axis", },grid: {left: "3%",right: "4%",bottom: "8%",containLabel: true, }, // 整体gird表示图的位置legend: {x: "center",y: "bottom",itemHeight: 8,itemWidth: 8,}, // legend表示文字的样式&＃xff0c;位置。itemHeight和itemWidth相等&＃xff0c;表示的就是正方形color: ["#218AFF", "#47B8D9"], // 文字的颜色xAxis: [ // x坐标的相关配置{type: "category",data: data.map((item) &＃61;> item.date), // 对数据的渲染axisPointer: { // 鼠标移入的效果type: "line", // 线lineStyle: {color: "#6b6b6b", // 线的颜色type: "solid", // width: 40,},},axisTick: { // x轴是否显示刻度线show: false,},axisLine: { // 是否显示x轴最下面的线&＃xff0c;以及线的样式show: true,lineStyle: {color: "#818286",},},},],yAxis: [ // 由于是折柱混合&＃xff0c;所以要有两个y轴&＃xff0c;那么就要对两个y轴进行属性样式设定{ // 左边y轴type: "value",axisLabel: { // y轴的坐标formatter: function (value) {return value &＃43; "MH/s";},},axisTick: {show: false,}, // 是否显示刻度线splitLine: {show: true,lineStyle: {type: &＃39;dashed&＃39;}}, //画y轴的线axisLine: {show: false, // y轴最左边的线是否显示lineStyle: {color: "#989898", // y轴最左边的单位的样式},},// y轴最左边的线的样式},// y轴右边线的样式&＃xff0c;和左边同理{type: "value",axisTick: {show: false,},axisLine: {show: false,lineStyle: {color: "#989898",},},splitLine: {show: true,lineStyle: {type: &＃39;dashed&＃39;}},axisLabel: {formatter: function (value) {return value;},},},],series: [ // 圆柱和曲线的绘制{name: "算力",type: "bar", // 圆柱color: "#1362FE",barWidth: 40, // 圆柱的宽// stack: &＃39;1&＃39;,itemStyle: { // 圆柱的样式//柱形图圆角&＃xff0c;鼠标移上去效果&＃xff0c;如果只是一个数字则说明四个参数全部设置为那么多emphasis: {barBorderRadius: 30,// barBorderColor: "rgba(0,0,0,0)",// color: "rgba(0,0,0,0)",},normal: {//柱形图圆角&＃xff0c;初始化效果barBorderRadius: [6, 6, 0, 0],marginBottom: 20,// barBorderColor: "rgba(0,0,0,0)",// color: "rgba(0,0,0,0)",},},data: data.map((item) &＃61;> (item.hashrate / 1000000).toFixed(2)), // 圆柱数据的渲染},{// 折现的渲染配置name: "收益",color: "#FB7829",type: "line", //线smooth: true, // 光滑symbol: "none",// 鼠标滑过&＃xff0c;是否显示小圆点yAxisIndex: 1, // 不重叠,如果是多个图&＃xff0c;可以给yAxisIndex分别设置1&＃xff0c;2&＃xff0c;3&＃xff0c;....data: data.map((item) &＃61;>(item.amount / 1000000000000000000).toFixed(5)), // 折现的数据渲染},],};myEchartWeekly.setOption(optionWeekly); // 通过setOption这个方法&＃xff0c;将配置好的参数(optionWeekly)&＃xff0c;绘制到画板(myEchartWeekly)上.},


• 以上就是对折柱绘制的总结。我最欣赏的&＃xff0c;不是他的参数配置&＃xff0c;而是图标数据&＃xff0c;作为整个参数传递。最后在图表中&＃xff0c;利用map去一个一个取值

双折线图

• 上代码

earnEcharts(data) {let myEchartLine &＃61; this.$echarts.init(document.getElementById("earnEcharts"));let optionLine &＃61; {tooltip: {trigger: "axis",},legend: {x: "center",y: "bottom",padding: [0, 0, 0, 0],data: [{ name: "收益", icon: "rect" },{ name: "均值", icon: "rect" }, // icon 可以设置文字前图标的类型],itemHeight: 8, // 设置图标宽高&＃xff0c;其实设置宽高一直&＃xff0c;那不就是正方形了么itemWidth: 8,},color: ["rgba(17, 99, 255)", "rgba(243, 122, 44)"],grid: {left: "3%",right: "4%",bottom: "7%",containLabel: true,},xAxis: {type: "category",boundaryGap: false,data: data.map((item) &＃61;> { // 对x轴数据的处理let date &＃61; new Date(item.time * 1000); //当你出现了Invalid date,使用时间 * 1000或者加上.unix(&＃43;res)return this.$moment(date).format("MM-DD hh:00");}),axisLabel: { // 对坐标值的处理interval: 50,formatter: (value, idx) &＃61;> {var date &＃61; new Date(value);return this.$moment(date).format("MM-DD hh:00");},},axisTick: {show: false,},axisLine: {show: false,lineStyle: {color: "#989898",},},},axisTick: {show: false,},axisLine: {show: false,lineStyle: {color: "#989898",},},},yAxis: {type: "value",axisLine: {show: false,lineStyle: {color: "#989898",},},axisTick: {show: false,},},series: [{name: "收益",type: "line",stack: "总量",smooth: true,symbol: "none", //取消折点圆圈areaStyle: {color: "rgba(17, 99, 255, 0.2)"},data: data.map((item) &＃61;> {return item.amount;}),itemStyle: {normal: {lineStyle: {color: "#218AFF",width: 0.5},},},},{name: "均值",type: "line",stack: "总量", // 这个是不要的&＃xff0c;我留了一个bug。这个总量是会叠加的&＃xff0c;在这一条折线里&＃xff0c;我们需要的是单个折现的数据。所以应该把stack去掉smooth: true,symbol: "none", //取消折点圆圈areaStyle: {color: "rgba(243, 122, 44, 0.2)"}, // 折现下面的阴影部分data: data.map((item) &＃61;> {return item.meanAmount;}),itemStyle: {normal: {lineStyle: {color: "#47B8D9",width: 0.5},},},},],};myEchartLine.setOption(optionLine);},


双折现图的难点在于对数据的处理&＃xff0c;后端返回的数据是这样的

他要实时的时间所对应的数据&＃xff0c;来描绘图标&＃xff0c;但是图标展示却是这样的

• 接下来就直接看对数据的处理了,
• 要求是只要格式是 月-日 时:00 ,我这里用了moment,
• this.$moment(date).format(“MM-DD hh:00”) 这样就可以转化成自己想要的格式

axisLabel: {interval: 50, // 坐标的间隔值。这个值&＃xff0c;会自动排间隔&＃xff0c;你想坐标上放两个间隔坐标值&＃xff0c;那你间隔就大一下&＃xff0c;这个是自适应的。formatter: (value) &＃61;> {var date &＃61; new Date(value);return this.$moment(date).format("MM-DD hh:00");},},


我这是整体用的插件

安装 momen

cnpm i moment -S


-在main.js中导入&＃xff0c;并且挂载到vue原型上

import echarts from &＃39;echarts&＃39;
Vue.prototype.$moment &＃61; moment;//赋值使用


均值是0.01所以这个图应该是这样的

下面再来看一个图&＃xff0c;这个图也是两根折现&＃xff0c;但是他是年月日切换的

• 图跟下面日期就不多上了&＃xff0c;上一个图已经详细说明。这个图将说说年月日切换这个
• 首先要明白&＃xff0c;年月日切换也是调接口&＃xff0c;所以现在问题就变得异常简单&＃xff0c;点击年月日&＃xff0c;传不同的参数给图表接口&＃xff0c;那倒数据&＃xff0c;渲染即可
  上代码
• 点击切换日期代码

<div class&＃61;"data-main-nyr"><p&＃64;click&＃61;"getIsActive(1, 1)":class&＃61;"[isactive &＃61;&＃61; 1 ? &＃39;data-main-nyr-p&＃39; : &＃39;&＃39;]">日</p><p&＃64;click&＃61;"getIsActive(2, 1)":class&＃61;"[isactive &＃61;&＃61; 2 ? &＃39;data-main-nyr-p&＃39; : &＃39;&＃39;]">周</p><p&＃64;click&＃61;"getIsActive(3, 1)":class&＃61;"[isactive &＃61;&＃61; 3 ? &＃39;data-main-nyr-p&＃39; : &＃39;&＃39;]">月</p></div>


• 逻辑代码

getIsActive(i, index) {if (index &＃61;&＃61; 1) {this.isactive &＃61; i;} else {this.isactive1 &＃61; i;}if (i &＃61;&＃61; 1) {this.getStatisticsList("d", index);} else if (i &＃61;&＃61; 2) {this.getStatisticsList("w", index);} else {this.getStatisticsList("m", index);}},// 根据年月日请求数据getStatisticsList(index, i) {getStatistics({ zoom: index },(res) &＃61;> {if (i &＃61;&＃61; 1) {this.manyLine(res.data.data, index);} else if (i &＃61;&＃61; 0) {this.manyLine1(res.data.data, index);} else {this.manyLine(res.data.data, index);this.manyLine1(res.data.data, index);}},(err) &＃61;> {console.log(err);});},


饼图

drawChart(datalist) {const myEchart &＃61; echarts.init(document.getElementById("main"));const option &＃61; {tooltip: {trigger: "item", },color: ["rgba(30, 208, 160, 1)", "rgba(247, 122, 41, 1)", "red"],series: [{name: "份额",type: "pie",radius: ["54%", "70%"],avoidLabelOverlap: false,label: {show: false,position: "center",},labelLine: {show: false,},data: [{ value: datalist.valid_shares24h, name: "有效份额" },{ value: datalist.stale_shares24h, name: "延迟份额" },{ value: datalist.invalid_shares24h, name: "无效份额" },],},],};myEchart.setOption(option);},


• 这个饼图也没啥说的&＃xff0c;就是中间的那个状态。我们是根据右侧的数据&＃xff0c;来展示饼图里面显示的文字。所以需要做个数据处理,并且样式需要定位

.share-main-photo {position: absolute;left: 60px;top: 110px;display: flex;flex-direction: column;align-items: center;justify-content: center;
}


<p>健康度</p><p>{{(datalist.valid_shares24h / datalist.all) * 100 >&＃61; 90? "极好": (datalist.valid_shares24h / datalist.all) * 100 >&＃61; 70? "良好": (datalist.valid_shares24h / datalist.all) * 100 >&＃61; 50? "较差": "极差"}}</p>


横条展示&＃xff0c;类似于百分比&＃xff0c;这个是自己实现的

首先实现一个全红的样式横条&＃xff0c;然后里面的样式&＃xff0c;通过计算来实现

<div class&＃61;"line-red"><pclass&＃61;"line-green":style&＃61;"{ width: parseInt((2 / (2 &＃43; 8)) * 410) &＃43; &＃39;px&＃39; }"></p></div>


.line-red {margin-top: 6px;margin-right: 20px;height: 26px;background: #f71664;
}
.line-green {height: 26px;background: #21ce9d;
}