宝安附近做网站公司,公司做营销型网站,门户网站 意义,做慧聪网站多少钱前言
我们知道echarts是一个非常强大的绘图库#xff0c;基于这个库#xff0c;我们可以绘制出精美的图表。对于一张图来说#xff0c;其实比较重要的就是配置项#xff0c;填入不同的配置内容就可以呈现出不同的效果。
当然配置项中除了样式之外#xff0c;最重要的就是…前言
我们知道echarts是一个非常强大的绘图库基于这个库我们可以绘制出精美的图表。对于一张图来说其实比较重要的就是配置项填入不同的配置内容就可以呈现出不同的效果。
当然配置项中除了样式之外最重要的就是数据了因为图表本身就是用来展示数据的我们在使用echarts的时候通常都是通过网络去接受数据然后进行展示如果需要绘制特定数据的图表则需要编程实现这非常麻烦。为了解决这个我们我们可以写一个可以动态更改数据的页面来进行动态图表的绘制。
绘制柱状图
通过填入数据可以在线绘制柱状图并且可以动态修改数据效果如下图所示 在页面上可以动态插入和删除数据图表可以正确做出响应完整的代码如下所示
templatediv classcontainerdiv classleft-gridel-cardel-rowel-formel-form-item label柱状图标题el-input v-modeltitle/el-input/el-form-itemel-form-item label横坐标el-input v-modelinput_axis/el-input/el-form-itemel-form-item label纵坐标el-input v-modelinput_series/el-input/el-form-itemel-form-itemel-button typeprimary clickinsertData插入数据/el-button/el-form-itemel-form-itemel-button typeprimary sizemedium clickcreate_axis点击生成表格/el-button/el-form-item/el-form/el-row/el-cardel-cardel-rowel-table :datatable_data :show-headertrue :height320 stripeel-table-column typeindex label序号 width100%/el-table-columnel-table-column propaxis label横坐标/el-table-columnel-table-column propseries label纵坐标/el-table-columnel-table-column label操作template #defaultscopeel-button typedanger clickdeleteItemByIndex(scope.row)删除/el-button/template/el-table-column/el-table/el-row/el-card/divdiv classright-grid refmyChart/div/div
/templatescript
import { getCurrentInstance } from vue;
export default {data() {return {table_data: [{ axis: 衬衫, series: 5 },{ axis: 羊毛衫, series: 20 },{ axis: 雪纺衫, series: 36 },{ axis: 裤子, series: 10 },{ axis: 高跟鞋, series: 10 },{ axis: 袜子, series: 20 },],title: 在线绘制柱状图,echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,input_axis: ,input_series: 0,};},mounted() {this.create_axis();},methods: {create_axis() {//3.初始化实例对象 echarts.init(dom容器)var data_xAxis [];var data_series [];var data_legend [销量];for (var i 0; i this.table_data.length; i) {data_xAxis.push(this.table_data[i].axis);data_series.push(this.table_data[i].series);}var dom this.$refs[myChart]; // 获取dom节点var myChart this.echarts.init(dom);//4.指定配置项和数据var option {title: {text: this.title,},tooltip: {},legend: {data: data_legend,},xAxis: {data: data_xAxis,},yAxis: {},series: [{name: 销量,type: bar,data: data_series,},],};//5.将配置项设置给echarts实例对象使用刚指定的配置项和数据显示图表。myChart.setOption(option);},deleteItemByIndex(row) {var index this.table_data.findIndex((item) item.axis row.axis);this.table_data.splice(index, 1);this.create_axis();},insertData() {this.table_data.push({axis: this.input_axis,series: this.input_series,});this.create_axis();},},
};
/scriptstyle scoped
.container {display: grid;grid-template-columns: 35% 65%;width: 100%;height: 100%;
}.left-grid {background-color: #f0f0f0;border-radius: 2%;padding: 20px;height: 90%;
}.right-grid {background-color: #f9ecc3;border-radius: 2%;padding: 20px;height: 90%;
}.grid-content1 {background-color: rgb(44, 143, 121);border-radius: 4px;height: 100vh;width: 35vw;
}.grid-content2 {background-color: rgb(44, 143, 121);border-radius: 4px;height: 100vh;width: 65vw;
}.bg-purple {background: #7e2970;
}
.bg-purple-light {background: #071c4d;
}
/style在进行数据修改的时候我们主要是对这个列表进行处理其中axis是横坐标series是纵坐标 当需要重新渲染图表的时候需要将这两个维度的数据分别提取出来变成两个列表赋值给option相应的配置项 data_xAxis代表横轴的数据data_series代表纵轴的数据 绘制饼状图
饼状图的数据格式和柱状图稍微有点不同先看一下饼状图的绘制效果 下面是绘制饼状图的完整代码
templatediv classcontainerdiv classleft-gridel-cardel-rowel-formel-form-item label柱状图标题el-input v-modeltitle/el-input/el-form-itemel-form-item label名称el-input v-modelinput_name/el-input/el-form-itemel-form-item label数值el-input v-modelinput_value/el-input/el-form-itemel-form-itemel-button typeprimary clickinsertData插入数据/el-button/el-form-itemel-form-itemel-button typeprimary sizemedium clickcreate_axis点击生成表格/el-button/el-form-item/el-form/el-row/el-cardel-cardel-rowel-table :datapie_data :show-headertrue :height320 stripeel-table-column typeindex label序号 width100%/el-table-columnel-table-column propname label名称/el-table-columnel-table-column propvalue label数值/el-table-columnel-table-column label操作template #defaultscopeel-button typedanger clickdeleteItemByIndex(scope.row)删除/el-button/template/el-table-column/el-table/el-row/el-card/divdiv classright-grid refmyChart/div/div
/templatescript
import { getCurrentInstance } from vue;
export default {data() {return {pie_data: [{ name: 制造业, value: 55.217 },{ name: 金融业, value: 21.714 },{ name: 采矿业, value: 4.333 },{ name: 信息传输、软件和信息技术服务业, value: 4.308 },{ name: 交通运输、仓储和邮政业, value: 3.242 },{ name: 电力、热力、燃气及水的生产和供应业, value: 3.193 },],title: 在线绘制饼状图,echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,input_name: ,input_value: 0,};},mounted() {this.create_pie();},methods: {create_pie() {console.log(this.pie_data);var myChart this.echarts.init(this.$refs[myChart]);var option {title: {text: this.title, //标题},tooltip: {},legend: {y: 50,textStyle: {fontSize: 14,},},label: {show: true,},series: [{name: 分布, //数据的名字type: pie, //表示柱状图radius: 70%, //圆的半径center: [50%, 60%],label: {formatter: function (params) {console.log(params.name params.value %);return params.name params.value %;},textStyle: {fontSize: 14,fontWeight: bolder,},color: inherit,},data: this.pie_data,selectedMode: single, //选中效果使选中区域偏离圆心一小段距离single或者multipleselectedOffset: 10, //偏离圆心的一小段距离},],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},deleteItemByIndex(row) {var index this.pie_data.findIndex((item) item.name row.name);this.pie_data.splice(index, 1);this.create_pie();},insertData() {this.pie_data.push({name: this.input_name,value: this.input_value,});this.create_pie();},},
};
/scriptstyle scoped
.container {display: grid;grid-template-columns: 35% 65%;width: 100%;height: 80vh;
}.left-grid {background-color: #f0f0f0;border-radius: 2%;padding: 20px;height: 90%;
}.right-grid {background-color: #f9ecc3;border-radius: 2%;padding: 20px;height: 90%;
}.grid-content1 {background-color: rgb(44, 143, 121);border-radius: 4px;height: 100vh;width: 35vw;
}绘制饼状图比较简答我们只需要维护一组数据就行了不需要进行数据转换 可以看到数据是一个列表每个列表项都包含了name和value两个值其中name代表种类value代表数值最后绘制的时候会按照百分比在饼图中进行划分。
在option中直接使用这个数据列表就行了 绘制折线图
我们最后来看一下折线图折线图的绘制思路和柱状图几乎是一样的我们需要维护一组数据当需要重新渲染图表的时候需要对数据进行一下转换先看一下效果 绘制折线图的完整代码如下
templatediv classcontainerdiv classleft-gridel-cardel-rowel-formel-form-item label折线图标题el-input v-modeltitle/el-input/el-form-itemel-form-item label横坐标el-input v-modelinput_xaxis/el-input/el-form-itemel-form-item label纵坐标el-input v-modelinput_yaxis/el-input/el-form-itemel-form-itemel-button typeprimary clickinsertData插入数据/el-button/el-form-itemel-form-itemel-button typeprimary sizemedium clickcreate_axis点击生成表格/el-button/el-form-item/el-form/el-row/el-cardel-cardel-rowel-table :datatable_data :show-headertrue :height320 stripeel-table-column typeindex label序号 width100%/el-table-columnel-table-column propxaxis label横坐标/el-table-columnel-table-column propyaxis label纵坐标/el-table-columnel-table-column label操作template #defaultscopeel-button typedanger clickdeleteItemByIndex(scope.row)删除/el-button/template/el-table-column/el-table/el-row/el-card/divdiv classright-grid refmyChart/div/div
/templatescript
import { getCurrentInstance } from vue;
export default {data() {return {table_data: [{ xaxis: 2023-5-1, yaxis: 5 },{ xaxis: 2023-6-1, yaxis: 20 },{ xaxis: 2023-7-1, yaxis: 36 },{ xaxis: 2023-8-1, yaxis: 10 },{ xaxis: 2023-9-1, yaxis: 10 },{ xaxis: 2023-10-1, yaxis: 20 },],title: 在线绘制折线图,echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,input_xaxis: ,input_yaxis: 0,};},mounted() {this.create_axis();},methods: {create_axis() {//3.初始化实例对象 echarts.init(dom容器)var data_xAxis [];var data_yAxis [];for (var i 0; i this.table_data.length; i) {data_xAxis.push(this.table_data[i].xaxis);data_yAxis.push(this.table_data[i].yaxis);}console.log(data_xAxis);console.log(data_yAxis);var dom this.$refs[myChart]; // 获取dom节点var myChart this.echarts.init(dom);//4.指定配置项和数据var option {title: {text: this.title,},tooltip: {},xAxis: {type: category,boundaryGap: false,data: data_xAxis,},yAxis: {type: value,},legend: {},series: [{name: 示例数据,data: data_yAxis,type: line,areaStyle: {},// label标签用来显示每个点的值label: {show: true,position: top,},smooth: true,},],};//5.将配置项设置给echarts实例对象使用刚指定的配置项和数据显示图表。myChart.setOption(option);},deleteItemByIndex(row) {console.log(row);var index this.table_data.findIndex((item) item.xaxis row.xaxis);this.table_data.splice(index, 1);this.create_axis();},insertData() {this.table_data.push({xaxis: this.input_xaxis,yaxis: this.input_yaxis,});this.create_axis();},},
};
/scriptstyle scoped
.container {display: grid;grid-template-columns: 35% 65%;width: 100%;height: 100%;
}.left-grid {background-color: #f0f0f0;border-radius: 2%;padding: 20px;height: 90%;
}.right-grid {background-color: #f9ecc3;border-radius: 2%;padding: 20px;height: 90%;
}.grid-content1 {background-color: rgb(44, 143, 121);border-radius: 4px;height: 100vh;width: 35vw;
}.grid-content2 {background-color: rgb(44, 143, 121);border-radius: 4px;height: 100vh;width: 65vw;
}.bg-purple {background: #7e2970;
}
.bg-purple-light {background: #071c4d;
}
/style我们同样是维护一组数据 当需要重新渲染图像的时候再进行一下格式转换将一个列表变成两个列表 最后在option配置项中填入横坐标和纵坐标 结语
本文介绍了基于vueelement-plusecharts制作动态绘图页面的方法希望对你有所帮助。
