angularjs做的网站有哪些,查询网站外链,天津企业网站建设公司,重庆网站空间费用在vue2中的完整盒须图组件代码
可自适应浏览器窗体变化#xff0c;可自定义横坐标#xff0c;无需写箱线图数据处理逻辑。dataTool是echarts自带的#xff0c;无需额外安装#xff0c;只要引入。
templatespandiv refBoxPlotChart id可自定义横坐标无需写箱线图数据处理逻辑。dataTool是echarts自带的无需额外安装只要引入。
templatespandiv refBoxPlotChart idbox-plot/div/span
/templatescript
import dataTool from echarts/extension/dataTool;export default {name: BoxplotChart,props: {boxplotData: {type: Object,required: true,},},data() {return {option: {title: {text: ,left: 10, //标题显示的位置},tooltip: {trigger: item,axisPointer: {type: cross,},},grid: {left: 10%,right: 10%,bottom: 15%,},xAxis: {data: [],type: category,boundaryGap: true,nameGap: 30,splitArea: {show: false,},splitLine: {show: false,},},yAxis: {type: value,name: ,splitArea: {show: true,},},series: [{name: 非异常值,type: boxplot,data: [],tooltip: {//以下是设置tooltip的显示数据和显示格式formatter: function (param) {return [ param.name : ,上限: param.data[5],上四分位数: param.data[4],中位数: param.data[3],下四分位数: param.data[2],下限: param.data[1],].join(br/);},},},{name: 异常值,type: scatter,data: [],},],},};},mounted() {this.initChart();},watch: {boxplotData: function (newVal, oldVal) {this.initChart();},},methods: {initChart() {//使用echarts的dataTool准备数据let dataTmp this.$echarts.dataTool.prepareBoxplotData(this.boxplotData.boxData);//设置option//设置非异常值数据this.option.series[0].data dataTmp.boxData;//设置异常值数据this.option.series[1].data dataTmp.outliers;//根据传入的boxplotData数据动态设置//设置盒须图标题this.option.title.text this.boxplotData.title;//设置横坐标this.option.xAxis.data this.boxplotData.xAxisData;//设置纵坐标this.option.yAxis.name this.boxplotData.yAxisName;const myChart this.$echarts.init(this.$refs.BoxPlotChart);// 监听窗体大小变化实现自适应window.addEventListener(resize, function () {myChart.resize();});myChart.setOption(this.option);},},
};
/scriptstyle scoped langscss
#box-plot {width: 100%;height: 100%;
}
/style
