利用公共dns做网站解析,网站建设客户需求分析调研,php网站开发设计系统,重庆有哪些互联网大厂[vue]Echart使用手册 使用环境Echart的使用Echart所有组件和图表类型Echart 使用方法 使用环境
之前是在JQuery阶段使用Echart#xff0c;直接引入Echart的js文件即可#xff0c;现在是在vue中使用,不仅仅时echarts包#xff0c;还需要安装vue-echarts#xff1a;
… [vue]Echart使用手册 使用环境Echart的使用Echart所有组件和图表类型Echart 使用方法 使用环境
之前是在JQuery阶段使用Echart直接引入Echart的js文件即可现在是在vue中使用,不仅仅时echarts包还需要安装vue-echarts
vue: ^3.3.10,
echarts: ^5.4.2,
vue-echarts: ^6.6.2,Echart的使用
Echart所有组件和图表类型
在vue中使用Echart发现在设置某些属性的时候图上对应的测试项死活出不来。。。
然后翻找源代码发现对于Echart中属性的使用都需要注册–组件与对应类型图表
在使用过程中图表很容易猜测出来柱图或者折线图但是组件的名称就不太容易确定又没有明确的文档说明只能查看源码
以下是所有组件与图表类型需要的时候注册对应的即可 var BUITIN_COMPONENTS_MAP {grid: GridComponent,polar: PolarComponent,geo: GeoComponent,singleAxis: SingleAxisComponent,parallel: ParallelComponent,calendar: CalendarComponent,graphic: GraphicComponent,toolbox: ToolboxComponent,tooltip: TooltipComponent,axisPointer: AxisPointerComponent,brush: BrushComponent,title: TitleComponent,timeline: TimelineComponent,markPoint: MarkPointComponent,markLine: MarkLineComponent,markArea: MarkAreaComponent,legend: LegendComponent,dataZoom: DataZoomComponent,visualMap: VisualMapComponent,// aria: AriaComponent,// dataset: DatasetComponent,// DependenciesxAxis: GridComponent,yAxis: GridComponent,angleAxis: PolarComponent,radiusAxis: PolarComponent};var BUILTIN_CHARTS_MAP {line: LineChart,bar: BarChart,pie: PieChart,scatter: ScatterChart,radar: RadarChart,map: MapChart,tree: TreeChart,treemap: TreemapChart,graph: GraphChart,gauge: GaugeChart,funnel: FunnelChart,parallel: ParallelChart,sankey: SankeyChart,boxplot: BoxplotChart,candlestick: CandlestickChart,effectScatter: EffectScatterChart,lines: LinesChart,heatmap: HeatmapChart,pictorialBar: PictorialBarChart,themeRiver: ThemeRiverChart,sunburst: SunburstChart,custom: CustomChart};Echart 使用方法
import { use } from echarts/core;
import { CanvasRenderer } from echarts/renderers;
import { BarChart, LineChart, PieChart, ScatterChart } from echarts/charts;
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent, MarkPointComponent, MarkLineComponent } from echarts/components;use([CanvasRenderer,//必须注册TitleComponent,TooltipComponent,LegendComponent,GridComponent,ToolboxComponent,MarkPointComponent,MarkLineComponent,//需要展示该属性就需要注册BarChart,
]);例如上述代码中并不是案例都会用到MarkPointComponent,在设置图表选项中用到了该点才会需要注册。
以下是设置选项option设置遵循Echart文档即可
const barOpsreactive({title: {text: 柱图,left: left},tooltip: {trigger: axis,axisPointer: {type: cross,crossStyle: {color: #999}}},legend: {data: [条数, 金额]},xAxis: [{type: category,data: [成功,失败,重试],axisPointer: {type: shadow}}],yAxis: [{type: value,name: 条数,min: 0,max: null,interval: 100000,axisLabel: {formatter: {value}}},{type: value,name: 金额,min: 0,max: null,interval: 200000,axisLabel: {formatter: {value} 元,rotate: -45}}],series: [{name: 条数,type: bar,data: [200,100,500]},{name: 金额,type: bar,yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value;}},label: {show: true,formatter: {金额},rotate: 90,position: [50%, 50%]},data: [22200,1077770,5000]}]
})
series中type设置的类型就是需要注册的图表类型其它barOps的属性基本都是组件也是从这里确定你要注册的内容
v-chart classecharts :optionbarOps :autoresizetrue/v-chart
style
.echarts {width: 100%;height: 600px;
}
/style以上是图表的vue相关代码设置还有非常重要的一点在最开始的时候没有设置classecharts,图表根本不展示所以 Echart 一定要设置高度
