在做项目的时候可能需要使用到柱状图,饼状图,散点图。因此,就讲讲
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 系统列表,
代码如下:(柱状图)
@{
Layout = null;
}
</div>
<script src="~/Content/Echarts/echarts.js"></script>@*echarts 插件*@
<script>
//初始化echarts实例
var myechar = echarts.init(document.getElementById("echart"));
//指定图表的配置项和数据
var option = {
title: {//标题的配置参数
text: '柱状图',//标题名
left: 'center',//标题离容器左侧的距离 20px, 20%, 'left', 'center', 'right'
textStyle: {//文本样式
fontSize: 20,//主标题文字的字体大小
}
},
tooltip: {//tooltip:提示框组件
trigger: 'axis'//坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 当鼠标移到柱子会有一条竖线
// trigger: 'item' // 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
},
legend: {//图例组件。
orient: 'vertical',//图例列表的布局朝向。'horizontal'横向 'vertical'垂直
left: 'right',//离容器左侧的距离 20px, 20%, 'left', 'center', 'right'
// bottom: '10%',
// itemWidth: 10,//图例的宽度
//itemHeight: 10,//图例的高度
data: ['销量']
},
xAxis: {//直角坐标系 grid 中的 x 轴
data: ["苹果", "栗子", "梨子", "香蕉", "芒果", "柿子"]
},
yAxis: {//直角坐标系 grid 中的 y 轴
},
series: [{//系列列表。每个系列通过 type 决定自己的图表类型
name: '销量',//鼠标移到柱子显示的名字
type: 'bar',//图表类型
areaStyle: {
normal: {//修改颜色
............... }
},
data: [5, 2.0, 6, 9.7, 13, 14]//图表数据
}]
};
//使用刚指定的配置项和数据显示图表。
myechar.setOption(option)
</script>
运行结果:
代码如下:(饼状图)
@{
Layout = null;
}
</div>
<script src="~/Content/Echarts/echarts.js"></script>@*echarts 插件*@
<script>
//初始化echarts实例
var myechar = echarts.init(document.getElementById("echart"));
//指定图表的配置项和数据
var option1 = {
title: {
text: '饼状图'
},
tooltip: {//tooltip:提示框组件
// formatter: "{a} {b} <br/>人数:{c} , 比例:{d}%"
//饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
},
legend: {//legend:图例组件
orient: 'horizontal',//图例列表的布局朝向。'horizontal'横向 'vertical'垂直
left: 'right',//图例组件离容器左侧的距离 right右边
data: ["苹果", "栗子", "梨子", "香蕉", "芒果", "柿子"]//图例的数据数组
},
series: [//series:系列列表。每个系列通过 type 决定自己的图表类型
{
name: '销量',//系列名称,用于tooltip的显示,legend 的图例筛选
type: 'pie',//饼状图
radius: [0, '55%'],//饼图的半径,数组的第一项是内半径,第二项是外半径。
center: ['30%', '60%'],//饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
data: [
{ value: 5, name: '苹果' },//name数据项名称
{ value: 2.0, name: '栗子' },//value数据值
{ value: 6, name: '梨子' },
{ value: 9.7, name: '香蕉' },
{ value: 13, name: '芒果' },
{ value: 14, name: '袜子' },
]
}
]
};
//使用刚指定的配置项和数据显示图表。
myechar.setOption(option1)
</script>
运行结果:
代码如下:(散点图)
@{
Layout = null;
}
</div>
<script src="~/Content/Echarts/echarts.js"></script>@*echarts 插件*@
<script>
//初始化echarts实例
var myechar = echarts.init(document.getElementById("echart"));
//指定图表的配置项和数据
var option2 = {
title: {//title:标题组件
text: '散点图',//主标题文本
left: 'left',//离容器左侧的距离 20px, 20%, 'left', 'center', 'right'
textStyle: {
fontSize: 13,//主标题文字的字体大小
}
},
tooltip: {//提示框组件。
trigger: 'axis'//坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
// trigger: 'item' // 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
},
legend: {//图例组件
data: ['销量'],//图例数据数组
left: 'right'//图例组件离容器左侧的距离。 20px, 20%, 'left', 'center', 'right'
},
xAxis: [//直角坐标系 grid 中的 x 轴
{
name: '产品名',
nameLocation: 'end',//坐标轴的名称的显示位置'start','middle','end'
type: 'category',//坐标轴类型。 'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
data: ["苹果", "栗子", "梨子", "香蕉", "芒果", "柿子"]
//类目数据,在类目轴(type: 'category')中有效。
}
],
yAxis: [//直角坐标系 grid 中的 y 轴
{
name: '销量',
nameLocation: 'end',//坐标轴的名称的显示位置'start','middle','end'
type: 'value',//'value' 数值轴,适用于连续数据。
}
],
series: [//系列列表。每个系列通过 type 决定自己的图表类型
{
name: '销量',
type: 'line',//默认为直线,可选为:'line' | 'shadow'
areaStyle: {
normal: {//修改颜色
}
},//
data: [5, 2.0, 6, 9.7, 13, 14]//数据
}
]
};
//使用刚指定的配置项和数据显示图表。
myechar.setOption(option2)
</script>
运行结果: