1.实例中使用vue2，使用前npm安装：
npm install echarts -S
2.实现成果如下：
3.代码如下，对于echarts中图表的配置添加了一些说明使用：
<template>
<div class="content">
<div class="nav_ul">
<div class="nav_li" @click="chooseType(item)"
:class="{'nav_true':defaultType==item}" v-for="(item,index) in nav" :key="index">{{item=='bar'?'柱状图':item=='line'?'折线图':item=='scatter'?'散点图':item=='lineArea'?'面积图':''}}
</div>
</div>
<div class="chart">
<div ref="chart" class="chart_demo"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
nav:['bar','line','scatter','lineArea'],
defaultType:'bar',
dataList:[5, 20, 36, 10, 10, 20],//默认数据项
xAxis:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],//横坐标默认值
areaStyle: {//设置区域渐变样式
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
])
},
}
},
mounted(){
this.init(this.dataList);
},
methods:{
chooseType(type){
this.defaultType = type;
if(type=='scatter'){
let data = [];
for(let i=0;i<this.xAxis.length;i++){
data.push([this.xAxis[i],this.dataList[i]]);
}
this.init(data);
}else{
this.init(this.dataList);
}
},
init(data){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this.$refs.chart);
// 绘制图表
var option = {
title: {//标题
text: 'ECharts 入门示例',
textStyle:{//标题样式
fontSize:12,
color:'#11DEF6'
},
left: 'right',//标题位置,left,center,right
//x:'right',//水平安放,left,center,right
//y:'top',//垂直安放,top,center,bottom
backgroundColor:'#fff',//背景颜色
borderColor:'',//标题边框颜色
padding:5,//标题内边距，单位px,默认各方向内边距为5，同css
itemGap:10,//主副标题纵向间隔，单位px,默认为10
subtext:'图表展示',//副标题
subtextStyle:{//副标题样式
fontSize:12,
color:'#E4765D'
},
},
//color: ['#FF0087', '#FFBF00'],//设置series每一项对应的颜色
tooltip: {//鼠标放上去展示的数据提示
trigger: 'axis',//触发类型,默认数据触发,item/axis
showDelay:20,//显示延迟,可避免频繁切换，单位ms
hideDelay:100,//隐藏延迟，单位ms
backgroundColor:'#fff',//提示背景颜色
borderColor:"#333",//提示边框颜色
borderWidth:0,//边框线宽默认0
borderRadius:4,//边框圆角默认4
padding:5,//内边距默认5，同css
axisPointer: {
type: 'cross',//shadow/line/cross(包含line和shadow),默认为直线line
label: {
backgroundColor: '#6a7985'
},
lineStyle:{//直线指示器样式
color:'#999',
width:1,
type:'dashed',//线条样式solid,dashed,同border样式设置
},
shadowStyle:{//阴影指示器样式
width:'auto',//阴影大小
color:'rgba(150,150,150,3)',//阴影颜色
}
},
textStyle:{
}
},
legend: {//图表说明
orient:'horizontal',//布局方式,默认为水平布局，可选为:horizontal,vertical
data: ['价格', '销量',],
//left:'center',//图例位置默认center,left,right,
x:'center',//水平安放,left,center,right,默认全图居中
y:'top',//垂直安放,top,center,bottom,默认全图顶端
backgroundColor:'#fff',//背景颜色
borderColor:'',//图例边框颜色
borderWidth:0,//图例边框线宽，默认为0无边框
padding:5,//默认内边距为5，同css设置上右下左边距
itemGap:10,//各个item之间的间隔，默认为10，横向布局时为水平间隔，纵向布局为纵向间隔
itemWidth:20,//图例图形宽度
itemHeight:14,//图例图形高度
textStyle:{//图例样式
fontSize:12,
color:'#E4765D'
}
},
grid: {//控制坐标轴网格缩进
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
dataZoom: [//数据缩放，如果数据过多显示在网格中比较拥挤，可配置使用，start和end配置间隔单位，配置后在坐标轴下方会显示一个缩进控件
{
type: 'inside',//slider表示有滑块的，inslide表示内置的
show:false,//是否显示组件，如果设置false,不会显示，但是数据过滤功能还在
//backgroundColor: '#eee', // 组件背景颜色
dataBackground:{//数据阴影的样式
lineStyle:{},//阴影的线条样式
areaStyle:{}//阴影的填充样式
},
filterColor:'rgba(167,183,204,0)',//选中范围的填充样式
borderColor:'#ddd',//边框颜色
// filterMode:'filter',//filter：当前数据窗口外的数据，被过滤掉。即会影响其他轴的数据范围
// xAxisIndex:0,//设置dataZoom-inslide组件控制的x轴，可以用数组表示多个轴
// yAxisIndex:[0,2],//设置dataZoom-inslide组件控制的y轴，可以用数组表示多个轴
// radiusAxisIndex:3,//设置dataZoom-inslide组件控制的radius轴，可以用数组表示多个轴
// angleAxisIndex:[0,2],// 设置dataZoom-inslide组件控制的angle轴，可以用数组表示多个轴
start: 0,//数据窗口范围的起始百分比，表示0%
end: 50,//数据窗口范围的结束百分比，表示50%
startValue:0,//数据窗口范围的起始数组
endValue:100,//数据窗口范围的结束数组
orient:'horizontal',//布局方式，'horizontal'：水平,'vertical':竖直
zoomLock:false,//是否锁定选择区域的大小，如果true则锁定，就是说只能平移不能缩放
throttle:100,//设置触发视图刷新的频率，单位为ms
zoomOnMouseWheel:true,//如何触发缩放，可选：true表示不按任何功能键，鼠标滚轮触发缩放。false表示滚轮不缩放。'shift'表示
//按住shift和滚轮缩放，'ctrl'表示按住ctrl和滚轮缩放
moveOnMouseMove:true,//如何数据窗口平移，可选：true表示不按任何功能键，鼠标滚轮触发数据窗口平移。false表示滚轮不触发。'shift'表示
//按住shift和滚轮数据窗口平移，'ctrl'表示按住ctrl和滚轮数据窗口平移
left:'center',//组件高容器左侧的距离，left,center,right,20%
top:'top',组件高容器上侧的距离，top,middle,bottom,20%
right:'auto',组件高容器右侧的距离，20%
bottom:'auto'组件高容器下侧的距离，20%
},
{
show: true,
realtime: true,
height: 24,//这里可以设置dataZoom的尺寸
start: 0,
end: 10,
//backgroundColor: '#eee', // 填充颜色
textStyle: {
color: '#333' // 左右两边文字颜色
},
zoomLock:false,//是否锁定选择区域的大小，如果true则锁定，就是说只能平移不能缩放
throttle:100,//设置触发视图刷新的频率，单位为ms
zoomOnMouseWheel:true,//如何触发缩放，可选：true表示不按任何功能键，鼠标滚轮触发缩放。false表示滚轮不缩放。'shift'表示
//按住shift和滚轮缩放，'ctrl'表示按住ctrl和滚轮缩放
moveOnMouseMove:true,//如何数据窗口平移，可选：true表示不按任何功能键，鼠标滚轮触发数据窗口平移。false表示滚轮不触发。'shift'表示
//按住shift和滚轮数据窗口平移，'ctrl'表示按住ctrl和滚轮数据窗口平移
left:'center',//组件高容器左侧的距离，left,center,right,20%
top:'bottom',组件高容器上侧的距离，top,middle,bottom,20%
right:'auto',组件高容器右侧的距离，20%
bottom:'auto'组件高容器下侧的距离，20%
}
],
xAxis: {//x坐标轴
type: 'category',
data: this.xAxis,
boundaryGap:true,//是否遗留边界间隙，默认为true，false多用于折线图和面积图
axisLabel: {//坐标文本
interval: 0,
rotate: 30 ,//倾斜30度
show:true,//是否展示
textStyle:{//文本样式
}
},
axisTick: {
alignWithLabel: true,//刻度是否在文本居中
show:true,//是否显示坐标轴刻度,默认true
},
axisLine:{//轴线
show:true
},
splitLine:{//网格线
show:false
}
},
yAxis: {
inverse:false,//是否是反向坐标轴，当y轴充当原x轴使用，其他属性与xAxis配置一致,为true时xAxis值为空
// type: 'category',
// data: this.xAxis,
// boundaryGap:true,//是否遗留边界间隙，默认为true，false多用于折线图和面积图
// axisLabel: {//坐标文本
// interval: 0,
// rotate: 30 ,//倾斜30度
// show:true,//是否展示
// textStyle:{//文本样式
// }
// },
// axisTick: {
// alignWithLabel: true,//刻度是否在文本居中
// show:true,//是否显示坐标轴刻度,默认true
// },
// axisLine:{//轴线
// show:true
// },
// splitLine:{//网格线
// show:false
// }
},//x坐标轴
series: [
{
name: '价格',
type: this.defaultType=='lineArea'?'line':this.defaultType,//修改图表样式
smooth: true,//折线是否平滑,默认false,当type==line起作用
showSymbol: true,//是否显示节点,默认true,当type==line起作用
data: data,//数据
areaStyle:this.defaultType=='lineArea'?this.areaStyle:null,
emphasis: {
focus: 'series'
},
stack:'Total',
// barMaxWidth:40,//柱状图最大宽度
// barWidth:50,//柱状图宽度
// barGap:10,//柱状图间距
},
{
name: '销量',
type: this.defaultType=='lineArea'?'line':this.defaultType,//修改图表样式
smooth: true,//折现是否平滑,默认false,当type==line起作用
showSymbol: true,//是否显示节点,默认true,当type==line起作用
data: data,//数据
areaStyle:this.defaultType=='lineArea'?this.areaStyle:null,//areaStyle展示面积，null不展示
emphasis: {
focus: 'series'
},
stack:'Total',//堆叠数据，stack相同的一项，每次后一项都会加上前一项展示，用来将各项数据分割开，防止交叉显示，只有当有设置相同的stack项才起作用
// barMaxWidth:40,
// barWidth:50,
// barGap:10,
}
]
};
myChart.setOption(option);
var autoWidth = option.xAxis.data.length*50+150;//根据数据长度设置图表宽度
myChart.getDom().style.width = autoWidth+'px';
//myChart.getDom().childNodes[0].style.width = autoWidth+'px';
//myChart.getDom().childNodes[0].childNodes[0].style.width = autoWidth+'px';
//window.addEventListener("resize", myChart.resize);//窗口变化时自适应表格
myChart.resize();
}
}
}
</script>
<style scoped>
.chart{
height: 300px;
}
.chart_demo{
/* width: 100%; */
height: 100%;
padding-bottom: 20px;
margin: 0 auto;
}
.nav_ul{
display: inline-flex;
border: 1px solid #ddd;
margin: 20px auto;
}
.nav_ul .nav_li{
padding: 4px 10px;
font-size: 13px;
border-right: 1px solid #ddd;
cursor: pointer;
}
.nav_ul .nav_li:last-child{
border-right: 0;
}
.nav_true{
background-color: #4395ff;
color:#fff
}
</style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
