在做项目的时候可能需要使用到柱状图，饼状图，散点图。因此，就讲讲
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>
运行结果：
