echarts：主要配置信息
安装命令
npm install echarts --save
引入echarts
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9jVjabKK-1574069940512)(C:\Users\Administrator\Desktop\捕获.PNG)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lfL6mMWi-1574069940515)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1574069220039.png)]
饼图没有 x ，y轴
title：标题 在{}内书写样式
title:{
text:'ECharts 数据统计',
样式：
color：'red',
标题居中
x:'center',
fontWeight:'800',
},
tooltip：点击时提示信息
tooltip:{
textstyle：提示内容颜色位置
textStyle:{
align:'right',
color:'blue'
},
}，
legend：显示图形比例。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend:{
data:['来源'],
align:'right',
type:'plain',
x:'right',
// borderColor:'#3333',
// backgroundColor: 'blue',
// width:'800',
// height:'800'
},
series：系列列表。通过 type 决定图表类型
series: [{
//系列名称，用于tooltip的显示，legend 的图例筛选，
name: '累计活动数',
//line 是折现图 bar条形柱状图 pie 饼图
type: 'line',//系列类型
stack: '总量',//数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: sumArray//二位数组，
sumArray[i]表示在这一个座标里有多少个柱状图，sumArray[i]里的数组长度表示X轴有多少座标（这是我自己使用看到的效果，文档里还有别的用法）
}, {
name: '新增活动数',
type: 'bar',
animation: true,
yAxisIndex:0,
data: allWeekArray
}]
toolbox: 工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
toolbox: {
各工具配置项
feature: {
dataView: {
数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
show: true,//是否显示组件。
readOnly: false
},
magicType:{
//动态类型切换
示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
show:true,
type:['line','bar']
},
restore: {//配置项还原。
show: true
},
saveAsImage: {//保存为图片。
show: true
}
}
}
代码案例：
script type="text/javascript">
//指定图标的配置和数据
var option = {
title:标题
title:{
text:内容
text:'ECharts 数据统计',
样式：
color：'red',
标题居中
x:'center',
fontWeight:'800',
},
toolbox:{
feature: {//各工具配置项。
dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
show: true,//是否显示组件。
readOnly: false
},
magicType:{//动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
show:true,
type:['line','bar']
},
restore: {//配置项还原。
show: true
},
saveAsImage: {//保存为图片。
show: true
}
}
}，
tooltip:{
textstyle：提示内容颜色位置
textStyle:{
align:'right',
color:'blue'
},
}，
图形比例显示
legend:{
data:['用户来源']
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
决定y轴的方向
position:'right'
},
series:[{
name:'访问量',
type:控制类型 line 是折现图 bar条形柱状图 pie 饼图
type:'line',
data:[500,200,360,100]
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
echarts vue 完整案例代码
<template>
<div>
<div id="myChart" :style="{width: '300px', height: '300px',fontSize:'20px'}"></div>
<div id="myChart2" :style="{width: '300px', height: '300px'}"></div>
<div id="myChart3" :style="{width: '300px', height: '300px'}"></div>
</div>
</template>
<script>
export default {
mounted(){
var option = {
title:{
text:'数据统计',
x:'center',
fontWeight:'800',
textStyle:{
color:"red",
fontStyle:'italic',
borderColor:'blue',
padding:10,
textAlign:'center',
},
},
tooltip:{
textStyle:{
align:'center',
color:'blue'
},
trigger:'item',
},
legend:{
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
},
series:[{
name:'访问量',
type:'bar',
data:[500,200,360,100]
}]
};
//初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('myChart'))
myChart.setOption(option);
// loading加载
// myChart.showLoading()
// loading结束时间
setTimeout(function(){
myChart.hideLoading();
},5000)
//使用制定的配置项和数据显示图表
var option2 = {
title:{
text:'ECharts 数据统计',
textAlign:'',
x:'center',
textStyle:{
textAlign:'center',
}
},
tooltip:{
textStyle:{
align:'center',
color:'blue',
fontSize:"20"
},
// trigger:'axis',
},
series:[{
name:'访问量',
type:'pie',
radius:'50%',
data:[
{value:500,name:'年轻人'},
{value:200,name:'青年人'},
{value:360,name:'少年'},
{value:100,name:'少儿'}
]
}]
};
var myChart2 = this.$echarts.init(document.getElementById('myChart2'))
//使用制定的配置项和数据显示图表
myChart2.setOption(option2);
}
}
</script>
<style lang="less" scoped>
div{
font-size: 20px;
}
</style>