哪方面网站,网页设计毕业设计理念,广州系统软件app开发公司,深圳福田区有哪些大公司1 前言 本章主要对常用的echars图表展示进行基本的组件封装。使用该组件前需要在项目中引入echarts。官网#xff1a;Apache ECharts
npm install echarts --save
2 图表组件
2.1 折线图组件 组件属性#xff1a;chartId#xff0c;指定图表挂载div的id#xff0c;注意不…1 前言 本章主要对常用的echars图表展示进行基本的组件封装。使用该组件前需要在项目中引入echarts。官网Apache ECharts
npm install echarts --save
2 图表组件
2.1 折线图组件 组件属性chartId指定图表挂载div的id注意不要出现重复。当获取到数据后在父组件中调用该组件的initChart() 方法初始化图表。方法参数格式范例
{xAxis:[项1, 项2, 项3], yAxis:[12, 11, 122]
}
xAxis横坐标名称yAxis每项对应的数据量 组件代码
script setup langts
import * as echarts from echartsconst props defineProps{chartId: string
}()const initChart (data: any) {const chartDom document.getElementById(props.chartId);var myChart echarts.init(chartDom);var option;option {tooltip: {trigger: axis,axisPointer: {type: shadow}},xAxis: {type: category,data: data.xAxis,},yAxis: {type: value},series: [{data: data.yAxis,type: line}]};option myChart.setOption(option);
}defineExpose({ initChart })
/scripttemplatediv :idchartId stylewidth: 100%; height: 100%/div
/templatestyle scoped/style2.2 柱状图组件 组件属性chartId指定图表挂载div的id注意不要出现重复。当获取到数据后在父组件中调用该组件的initChart() 方法初始化图表。方法参数格式范例
{xAxis:[项1, 项2, 项3], yAxis:[12, 11, 122]
}
xAxis横坐标名称yAxis每项对应的数据量 组件代码
script setup langts
import * as echarts from echartsconst props defineProps{chartId: string
}()const initChart (data: any) {const chartDom document.getElementById(props.chartId);var myChart echarts.init(chartDom);var option;option {tooltip: {trigger: axis,axisPointer: {type: shadow}},xAxis: {type: category,data: data.xAxis,},yAxis: {type: value},series: [{data: data.yAxis,type: bar}]};option myChart.setOption(option);
}defineExpose({ initChart })
/scripttemplatediv :idchartId stylewidth: 100%; height: 100%/div
/templatestyle scoped/style2.3 饼图组件 组件属性chartId指定图表挂载div的id注意不要出现重复。当获取到数据后在父组件中调用该组件的initChart() 方法初始化图表。方法参数格式范例
[{ value: 1048, name: 数据项1 },{ value: 735, name: 数据项2 },{ value: 580, name: 数据项3 },{ value: 484, name: 数据项4 },{ value: 300, name: 数据项5 }] 组件代码
script setup langts
import * as echarts from echartsconst props defineProps{chartId: string
}()const initChart (data: any) {type EChartsOption echarts.EChartsOption;const chartDom document.getElementById(props.chartId)!const myChart echarts.init(chartDom)let option: EChartsOptionoption {tooltip: {trigger: item},legend: {top: 5%,left: center},series: [{name: 数据量,type: pie,radius: [40%, 70%],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: #fff,borderWidth: 2},label: {show: false,position: center},emphasis: {label: {show: true,fontSize: 20,fontWeight: bold}},labelLine: {show: false},data: data}]}option myChart.setOption(option)
}defineExpose({ initChart })
/scripttemplatediv :idchartId stylewidth: 100%; height: 100%/div
/templatestyle scoped/style
