echars 插件的柱状图,饼状图,散点图的使用

在做项目的时候可能需要使用到柱状图,饼状图,散点图。因此,就讲讲
echars 插件的柱状图,饼状图,散点图的使用
引用echars插件官网:https://echarts.baidu.com/index.html

在使用echars插件时
1.首先要引用echars插件,
2.写一个div用来装echars内容,
3.初始化echars 实例
4.指定图表的配置项和数据
5.使用指定的配置项和数据显示图表
Title 标题的配置参数
Tooltip 提示框组件
Legend 图例组件
xAxis 直角坐标系grid 中的x 轴
yAxis 直角坐标系grid 中的y 轴
Series 系统列表,

代码如下:(柱状图)
echars 插件的柱状图,饼状图,散点图的使用_第1张图片
@{
Layout = null;
}

index @*为ECharts准备一个具备大小(宽高)的Dom*@
@*echarts 插件*@

运行结果:

代码如下:(饼状图)
echars 插件的柱状图,饼状图,散点图的使用_第2张图片

@{
Layout = null;
}

index @*为ECharts准备一个具备大小(宽高)的Dom*@
@*echarts 插件*@

运行结果:

代码如下:(散点图)

@{
Layout = null;
}

index @*为ECharts准备一个具备大小(宽高)的Dom*@
@*echarts 插件*@

运行结果:

echars 插件的柱状图,饼状图,散点图的使用_第3张图片

你可能感兴趣的:(插件的使用,echars)