###setOption中的方法 1.title：用来展示视图的标题和样式 2.tooltip：提示框组件，修改鼠标移上去显示的数据信息的样式 3.series中的markPoint和markLine组件 markPoint组件：展示视图中的最大值和最小值 markLine组件：展示视图中的平均值线 4.legend：展示左侧的图例组件，可以切换是否显示
示例代码：柱状图
<template>
<div id="myChart" :style="{width: '1200px', height: '500px'}"></div>
</template>
<script>
export default {
name: 'Chart',
data () {
return {
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts',subtext:'学习Echarts',borderColor:'red',borderWidth:2,textShadowBlur: 2,left:'center',textAlign:'auto'},
tooltip: {
},
toolbox:{
show:true,
feature: {
show: true,
dataView:{
show:true
},
restore:{
show:true
},
saveAsImage:{
show:true
},
dataZoom:{
show:true
},
magicType:{
type:['line','bar']
}
}
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markPoint:{
data:[
{type:'max',name:'最大值',symbol:'triangle'},
{type:'min',name:'最小值'}
],
animationThreshold:10000,
},
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
},{
name: '产量',
type: 'line',
data: [7, 30, 50, 11, 40, 80]
}]
});
myChart.on('click', function (params) {
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
}
}
}
</script>
<style scoped>
</style>
示例代码：扇形图
<template>
<div id="pieChart" :style="{width: '1000px', height: '400px'}"></div>
</template>
<script>
export default {
name: "Pie",
data () {
return {
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let pieChart = this.$echarts.init(document.getElementById('pieChart'))
// 绘制图表
pieChart.setOption({
legend:{
orient:'vertical',
left:'left',
data:['视频广告','联盟广告','邮件营销','直接访问','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '45%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
itemStyle: {
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.1)',
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.1)'
}
}
}
],
backgroundColor: '#999999',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
visualMap: {
// 不显示 visualMap 组件，只用于明暗度的映射
show: false,
// 映射的最小值为 80
min: 80,
// 映射的最大值为 600
max: 600,
inRange: {
// 明暗度的范围是 0 到 1
colorLightness: [0, 1]
}
}
})
}
}
}
</script>
<!--scoped只在当前的组件起作用-->
<style scoped>
</style>
