潜江 网站建设,为什么网站显示在建设中,个人网站建设详细教程,wordpress如何防止被采集这里使用的在这里导入#xff0c;
秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场
这里我封装成一个组件#xff0c;自适应的#xff0c;可以直接复制到自己的项目中
templateqiun-data-charts typemix:optsopts:cha…这里使用的在这里导入
秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场
这里我封装成一个组件自适应的可以直接复制到自己的项目中
templateqiun-data-charts typemix:optsopts:chartDatachartData/
/templatescript
export default {data() {return {chartData: {},//您可以通过修改 config-ucharts.js 文件中下标为 [mix] 的节点来配置全局默认参数如都是默认参数此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式达到页面简洁的需求。opts: {color: [#1890FF,#91CB74,#FAC858,#EE6666,#73C0DE,#3CA272,#FC8452,#9A60B4,#ea7ccc],// padding: [15,15,15,15],enableScroll: false,legend: {},xAxis: {disableGrid: true,// title: 单位年},yAxis: {disabled: false,disableGrid: false,splitNumber: 5,gridType: dash,dashLength: 4,gridColor: #CCCCCC,padding: 10,showTitle: true,data: [{position: left,title: 折线1},{position: right,title: 折线2,// min: 0,// max: 200,},]},extra: {mix: {column: {width: 20}}}}};},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() {//模拟服务器返回数据如果数据格式和标准格式不同需自行按下面的格式拼接let res {categories: [2018,2019,2020,2021,2022,2023],series: [{index: 0,name: 折线1,type: line,style: curve,color: #1890ff,disableLegend: true,data: [70,50,85,130,64,88]},{index: 1,name: 折线2,type: line,style: curve,color: #2fc25b,disableLegend: true,data: [120,140,105,170,95,160]},]};this.chartData JSON.parse(JSON.stringify(res));}, 500);},},mounted(){this.getServerData();}
};
/scriptstyle scoped/* 请根据实际需求修改父元素尺寸组件自动识别宽高 */.charts-box {width: 100%;height: 100%;}
/style
这里是配置有几个轴
yAxis: {disabled: false,disableGrid: false,splitNumber: 5,gridType: dash,dashLength: 4,gridColor: #CCCCCC,padding: 10,showTitle: true,data: [
//配置有几个轴{position: left,title: 折线1},{position: right,title: 折线2,// min: 0,// max: 200,},]}, 配置在哪个轴上面index 0是第一个 index:1 指的是第二个依次类推
series: [{index: 0, // 配置第几个轴name: 折线1,type: line,style: curve,color: #1890ff,disableLegend: true,//是否在legend中显示默认不显示data: [70,50,85,130,64,88]},{index: 1,name: 折线2,type: line,style: curve,color: #2fc25b,disableLegend: true,data: [120,140,105,170,95,160]},]
