当前位置：首页 > news >正文

网站建设博客作业seo刷排名工具

news 2025/8/15 13:50:42

网站建设博客作业,seo刷排名工具,网页设计模板html代码百度云,一级a做爰片免费网站黄背景在实际项目中需要进行图表的绘制，虽然element提供了丰富的绘图接口，但依然不能满足实际的需求，所以需要借用echarts绘制内容更加丰富及美观的图表。两种方法 echarts的安装方法网上有，这里就不展开了，主要介绍目…

背景

在实际项目中需要进行图表的绘制，虽然element提供了丰富的绘图接口，但依然不能满足实际的需求，所以需要借用echarts绘制内容更加丰富及美观的图表。

两种方法

echarts的安装方法网上有，这里就不展开了，主要介绍目前用到的两种方法。

采用Vue-echarts

需要通过import 按需所取的倒入echarts的绘图组件
echarts的option存放在data中，并注册组件

<template><v-container fluid ><h1>Common Cover Material Properties Comparison </h1><v-divider/>        <v-row><v-col cols="12"><v-rowalign="stretch"justify="center"class="grey lighten-5"style="height: 400px;"><v-chart   :options="bar"/><v-chart   :options="bar"/></v-row></v-col></v-row></v-container></template>
<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/toolbox'
export default {name: "App",components: {"v-chart": ECharts},data :function() {return {bar: {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},// color: ['#003366', '#006699', '#4cabce', '#e5323e','#003366'],toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {// mark: {show: true},// dataView: {show: true, readOnly: false},// magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},// restore: {show: true},saveAsImage: {show: true}}},xAxis: [{type: 'category',axisTick: {show: false},data: ['E', 'Ro', 'Toughness_LT','Toughness_RT','Toughness_HT'],axisLabel: {textStyle: {fontSize :10}}}],yAxis: [{type: 'value',axisLabel: {textStyle: {fontSize :14}}}],title: {left: 'center',text: '应变率 100/s',},legend: {show:true,bottom: 10},series:[]}};},mounted(){this.getData()},methods: {getData() {this.$axios.get("/static/json/echart.json").then(response => {console.log(response.data);this.bar.series = JSON.parse(response.data);console.log(this.bar.series)},error => {  console.log(error);});},}}
</script>
<style>
.my-chart {width: 400px;height: 500px;
}
</style>

直接用echarts

导入 echarts模块
echarts的option存放在methods中（可以将官网案例代码段直接进行复制；粘贴，不需要任何改动）

<template><!--为echarts准备一个具备大小的容器dom--><div id="main" style="width: 600px; height: 400px"></div>
</template>
<script>
import echarts from "echarts";
export default {name: "",data() {return {DAB: {},};},methods: {drawData() {this.$axios.get("/static/json/DAB.json").then((response) => {console.log('000')console.log(response.data);this.DAB = JSON.parse(JSON.stringify(response.data));console.log("111");console.log(this.DAB.data1);this.drawPie("main")},(error) => {console.log(error);});},drawPie(id) {// this.getData();console.log('444')console.log(this.DAB.data1)this.charts = echarts.init(document.getElementById(id));this.charts.setOption({title: {text: "DAB Cover failure SVM Prediction",subtext: "Data from: 2021-04-14",},grid: {left: "3%",right: "7%",bottom: "7%",containLabel: true,},tooltip: {// trigger: 'axis',showDelay: 0,formatter: function (params) {if (params.value.length > 1) {return (params.seriesName +" :<br/>" +params.value[0] +"cm " +params.value[1] +"kg ");} else {return (params.seriesName + " :<br/>" + params.name + " : " + params.value + "kg ");}},axisPointer: {show: true,type: "cross",lineStyle: {type: "dashed",width: 1,},},},toolbox: {feature: {dataZoom: {},brush: {type: ["rect", "polygon", "clear"],},},},brush: {},legend: {data: ["No Failure", "Failure"],left: "center",bottom: 10,},xAxis: [{type: "value",scale: true,axisLabel: {formatter: "{value} cm",},splitLine: {show: false,},},],yAxis: [{type: "value",scale: true,axisLabel: {formatter: "{value} kg",},splitLine: {show: false,},},],series: [{name: "No failure",type: "scatter",emphasis: {focus: "series",},data: this.DAB.data1.nofailure,markArea: {silent: true,itemStyle: {color: 'transparent',borderWidth: 1,borderType: 'dashed'},data: [[{name: 'No failure Data Range',xAxis: 'min',yAxis: 'min'}, {xAxis: 'max',yAxis: 'max'}]]},markPoint: {data: [{type: 'max', name: 'Max'},{type: 'min', name: 'Min'}]},markLine: {lineStyle: {type: 'solid'},data: [{type: 'average', name: '平均值'},{ xAxis: 160 }]}},{name: "Failure",type: "scatter",emphasis: {focus: "series",},data: this.DAB.data1.failure,markArea: {silent: true,itemStyle: {color: 'transparent',borderWidth: 1,borderType: 'dashed'},data: [[{name: 'Failure Data Range',xAxis: 'min',yAxis: 'min'}, {xAxis: 'max',yAxis: 'max'}]]},markPoint: {data: [{type: 'max', name: 'Max'},{type: 'min', name: 'Min'}]},markLine: {lineStyle: {type: 'solid'},data: [{type: 'average', name: 'Average'},{ xAxis: 170 }]}},],});},},//调用mounted() {this.drawData();// console.log("222");// console.log(this.DAB.data1);//   if (Array.isArray(this.classList) && this.classList.length > 0) {//   this.$nextTick(function () {//     this.drawPie("main");//   });// }},
};
</script>
<style scoped>
* {margin: 10;padding: 0;list-style: none;
}
</style>