如何做公司培训网站,服装设计图,写出网站开发的基本流程,网站开发毕业设计中期汇报表目录 引言
echarts.vue 文件代码
echarts-config 文件代码
在需要引入echarts图表的页面(.vue)中进行导入该文件(echarts.vue)
使用该组件(echarts) 引言
在uniapp中需要引入echarts时的时候,需要引入两个配置文件.分别是 echarts.vue 以及 echarts-config 放在你项目中…目录 引言
echarts.vue 文件代码
echarts-config 文件代码
在需要引入echarts图表的页面(.vue)中进行导入该文件(echarts.vue)
使用该组件(echarts) 引言
在uniapp中需要引入echarts时的时候,需要引入两个配置文件.分别是 echarts.vue 以及 echarts-config 放在你项目中需要的目录下,
echarts.vue 文件代码
templateview classcontentview:propoptionData:moduleParamPropmoduleParam:change:moduleParamPropecharts.moduleParamUp:change:propecharts.updateEcharts:idmoduleParam.idclassecharts/view/view
/templatescriptconst style {backgroundColor: rgba(145,215,255, .3),dataBackground: {lineStyle: { color: rgba(145,215,255, .3) },areaStyle: { color: rgba(145,215,255, .5) },},selectedDataBackground: {lineStyle: { color: rgba(145,215,255, .6) },areaStyle: { color: rgba(145,215,255, .8) },},borderColor: rgb(145,215,255, .1),handleStyle: {color: rgba(145,215,255, .5),borderColor: rgba(145,215,255, .7),},moveHandleStyle: {color: rgba(145,215,255, .2),borderColor: rgba(145,215,255, .3),},fillerColor: rgba(145,215,255, .1),};import * as echarts from echarts;import echartsConfig from /common/echarts-config.js;export default {data() {return {};},mounted() {},props: {moduleParam: {type: Object,default: () {id: myCharts;width: 100%;height: 300rpx;},},optionData: {type: Object,default: {tooltip: {trigger: axis,textStyle: {color: #fff,},extraCssText:padding: 10px; max-width: 60%; max-height:80%; overflow-y: auto; background: rgba(0, 64, 193, 0.7); border: none; color: #fff; border:none; box-shadow: 0 0 5px 1px rgba(147, 235, 248, 1),},legend: {show: true,textStyle: { color: #FFFDFE },},grid: {left: 3%,right: 16%,bottom: 20%,containLabel: true,},toolbox: {show: false,},xAxis: {type: value,name: 时间(s),splitLine: {show: false,},axisLine: {lineStyle: {color: #B2CBDA,},},max: dataMax,},yAxis: {type: value,name: m/s²,splitLine: {show: false,},axisLine: {lineStyle: {color: #B2CBDA,},},},dataZoom: [{show: true,bottom: 10%,realtime: true,start: 0,end: 30,height: 10,...style,},{type: inside,realtime: true,start: 0,end: 30,...style,},],series: [{name: ,type: line,stack: Total,lineStyle: {color: #44F8FF,},showSymbol: false,data: [],},],},},},onLoad() {},methods: {},};
/scriptscript moduleecharts langrenderjsimport * as echarts from echartsimport echartsConfig from /common/echarts-config.jslet myChartexport default {data(){return{clickData:null}},watch: {optionData: {handler(newV) {// console.info(watcher : , newV)// this.updateEcharts(newV)},// 是否开启深度监听由于我们上面props中是一个Object对象所以需要开启深度监听功能deep: true,}},mounted() {this.$nextTick(() {if (typeof window.echarts function) {this.initEcharts()} else {// 动态引入较大类库避免影响页面展示const script document.createElement(script)// view 层的页面运行在 www 根目录其相对路径相对于 www 计算script.src static/echarts.jsscript.onload this.initEcharts.bind(this)document.head.appendChild(script)}})},methods: {initEcharts(){this.$nextTick(() {var dom document.getElementById(this.moduleParam.id)echarts.dispose(dom)myChart echarts.init(dom)// console.info(myChart : , myChart)// 观测更新的数据在 view 层可以直接访问到myChart.setOption(this.optionData)})// // 点击传参// myChart.on(click, params {// this.clickData params// })},updateEcharts(newValue, oldValue, ownerInstance, instance) {this.$nextTick(() {// 监听 service 层数据变更var dom document.getElementById(this.moduleParam.id)echarts.dispose(dom)myChart echarts.init(dom)// console.info(myChart : , myChart)if(myChart._dom ! null) {myChart.setOption(newValue)}})},moduleParamUp(newvalue,oldvalue){},onClick(event, ownerInstance) {ownerInstance.callMethod(onViewClick,{value:this.clickData.value,name:this.clickData.name,dataIndex:this.clickData.dataIndex,seriesName:this.clickData.seriesName})}}}
/scriptstyle.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.echarts {/* margin-top: 100px; */width: 100%;height: 250px;}
/style
echarts-config 文件代码
// 通用配置项
module.exports {color: [#91cc75,#348739,#fac858,#ee6666,#73c0de,#3ba272,#fc8452,#9a60b4,#ea7ccc],backgroundColor: rgba(0, 0, 0, 0),textStyle: {},title: {textStyle: {color: #464646},subtextStyle: {color: #6E7079}},line: {itemStyle: {borderWidth: 1},lineStyle: {width: 2},symbolSize: 4,symbol: emptyCircle,smooth: false},radar: {itemStyle: {borderWidth: 1},lineStyle: {width: 2},symbolSize: 4,symbol: emptyCircle,smooth: false},bar: {itemStyle: {barBorderWidth: 0,barBorderColor: #ccc}},pie: {itemStyle: {borderWidth: 0,borderColor: #ccc}},scatter: {itemStyle: {borderWidth: 0,borderColor: #ccc}},boxplot: {itemStyle: {borderWidth: 0,borderColor: #ccc}},parallel: {itemStyle: {borderWidth: 0,borderColor: #ccc}},sankey: {itemStyle: {borderWidth: 0,borderColor: #ccc}},funnel: {itemStyle: {borderWidth: 0,borderColor: #ccc}},gauge: {itemStyle: {borderWidth: 0,borderColor: #ccc}},candlestick: {itemStyle: {color: #eb5454,color0: #47b262,borderColor: #eb5454,borderColor0: #47b262,borderWidth: 1}},graph: {itemStyle: {borderWidth: 0,borderColor: #ccc},lineStyle: {width: 1,color: #aaa},symbolSize: 4,symbol: emptyCircle,smooth: false,color: [#5470c6,#91cc75,#fac858,#ee6666,#73c0de,#3ba272,#fc8452,#9a60b4,#ea7ccc],label: {color: #eee}},map: {itemStyle: {normal: {areaColor: #eee,borderColor: #444,borderWidth: 0.5},emphasis: {areaColor: rgba(255,215,0,0.8),borderColor: #444,borderWidth: 1}},label: {normal: {textStyle: {color: #000}},emphasis: {textStyle: {color: rgb(100,0,0)}}}},geo: {itemStyle: {normal: {areaColor: #eee,borderColor: #444,borderWidth: 0.5},emphasis: {areaColor: rgba(255,215,0,0.8),borderColor: #444,borderWidth: 1}},label: {normal: {textStyle: {color: #000}},emphasis: {textStyle: {color: rgb(100,0,0)}}}},categoryAxis: {axisLine: {show: true,lineStyle: {color: #6E7079}},axisTick: {show: true,lineStyle: {color: #6E7079}},axisLabel: {show: true,textStyle: {color: #6E7079}},splitLine: {show: false,lineStyle: {color: [#E0E6F1]}},splitArea: {show: false,areaStyle: {color: [rgba(250,250,250,0.2),rgba(210,219,238,0.2)]}}},valueAxis: {axisLine: {show: false,lineStyle: {color: #6E7079}},axisTick: {show: false,lineStyle: {color: #6E7079}},axisLabel: {show: true,textStyle: {color: #6E7079}},splitLine: {show: true,lineStyle: {color: [#E0E6F1]}},splitArea: {show: false,areaStyle: {color: [rgba(250,250,250,0.2),rgba(210,219,238,0.2)]}}},logAxis: {axisLine: {show: false,lineStyle: {color: #6E7079}},axisTick: {show: false,lineStyle: {color: #6E7079}},axisLabel: {show: true,textStyle: {color: #6E7079}},splitLine: {show: true,lineStyle: {color: [#E0E6F1]}},splitArea: {show: false,areaStyle: {color: [rgba(250,250,250,0.2),rgba(210,219,238,0.2)]}}},timeAxis: {axisLine: {show: true,lineStyle: {color: #6E7079}},axisTick: {show: true,lineStyle: {color: #6E7079}},axisLabel: {show: true,textStyle: {color: #6E7079}},splitLine: {show: false,lineStyle: {color: [#E0E6F1]}},splitArea: {show: false,areaStyle: {color: [rgba(250,250,250,0.2),rgba(210,219,238,0.2)]}}},toolbox: {iconStyle: {normal: {borderColor: #999},emphasis: {borderColor: #666}}},legend: {textStyle: {color: #333}},tooltip: {axisPointer: {lineStyle: {color: #ccc,width: 1},crossStyle: {color: #ccc,width: 1}}},timeline: {lineStyle: {color: #DAE1F5,width: 2},itemStyle: {normal: {color: #A4B1D7,borderWidth: 1},emphasis: {color: #FFF}},controlStyle: {normal: {color: #A4B1D7,borderColor: #A4B1D7,borderWidth: 1},emphasis: {color: #A4B1D7,borderColor: #A4B1D7,borderWidth: 1}},checkpointStyle: {color: #316bf3,borderColor: fff},label: {normal: {textStyle: {color: #A4B1D7}},emphasis: {textStyle: {color: #A4B1D7}}}},visualMap: {color: [#bf444c,#d88273,#f6efa6]},dataZoom: {handleSize: undefined%,textStyle: {}},markPoint: {label: {color: #eee},emphasis: {label: {color: #eee}}}
}
在文件里面有关于这两个文件的路径,根据自己的项目的结构目录进行配置
在需要引入echarts图表的页面(.vue)中进行导入该文件(echarts.vue)
import echarts from /components/echarts/echarts.vue;export default {components: {echarts,},data() {return{ }}} 使用该组件(echarts) echarts :moduleParam{ id: 自定义 } :optionData自定义的Option /echarts
其中这两个参数是必传的,第一个参数是为了让echarts 识别到你这个组件,并且要唯一, 第二个参数是图表的样式,详情可以去看echarts官网给出的样例
到此,echarts就引入成功! 如果有啥问题可以在评论区进行我,我会帮你们一一解答
