正文
echarts在vue里面使用，以及基础配置。
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
基础的图表和基础的配置。 效果图如下：
1、安装图表依赖包：npm install echarts
2、在main.js里面 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、 直接使用，配置和代码如下。
<template>
<div class="box">
<div id="myChart" :style="{width: '800px', height: '400px'}"></div>
</div>
</template> <script>
export default {
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('myChart'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
//提示框组件，专门配置提示框的。
tooltip: {
trigger:'axis',
// 坐标轴指示器配置项。
axisPointer:{
type:'cross', //指示器样试
}
},
//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
toolbox:{
feature:{
// 动态类型切换,切换图表
magicType: {
type: ['line', 'bar', ]
},
//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
dataView:{
show:true, //是否显示 数据示图
readOnly:false, //是否 直接可以编辑数据。
},
//保存为图片的配置
saveAsImage: {
show: true
},
//配置项还原
restore: {show: true},
}
},
//图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend:{
data:['实体查阅','电子查阅'] //对应的是name
},
//配置X轴
xAxis: {
//坐标轴类型
type:'category',
//配置类目名称。 可以逐一设置，具体看文档
data: ['一月', '二月', '三月', '四月', '五月', '六月','七月','八月','九月','十月','十一月','十二月'],
//配置 鼠标移入时显示的 阴影指示器'line' 直线指示器 'shadow' 阴影指示,器 'none' 无指示器
axisPointer: {
show:true, //show 必须写，开关的作用
type: 'shadow'
}
},
//配置Y轴
yAxis: [
{
type: 'value', //坐标轴类型
name: '实体查阅', //名称
min: 0, //最小值
max: 100, //最大值
interval: 10, //列数
axisLabel: { //坐标轴刻度标签的相关设置。
formatter: '{value}人' //字符串模板
}
},
],
//系列列表。每个系列通过 type 决定自己的图表类型,一个对象表示一个列表
series: [
{
name: '实体查阅',
type: 'bar',
data: [15, 25, 40, 20, 20, 22,23,44,42,25,32,45],
itemStyle:{ //图形的颜色。默认指向全局的option.color
color:'#F60'
}
},
{
name: '电子查阅',
type: 'line',
data: [45, 54, 66, 50, 40, 32,43,76,65,55,87,75]
}
],
//图表的颜色
color:['#CCC','#AFA', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
});
//鼠标事件
myChart.on('click',function(params){
console.log(params)
})
}
},
} </script> <style scoped>
.box{
margin-top:50px;
}
</style>
4、饼图配置和说明，以及效果图
<template>
<div class="box">
<div id="pieChart"></div>
</div>
</template> <script>
export default {
mounted(){
this.chartFn()
},
methods:{
chartFn(){
// 基于准备好的dom，初始化echarts实例
var pieChart = this.$echarts.init(document.getElementById('pieChart'));
pieChart.setOption({
title:{
text:'饼图', //标题
subtext: '练习专用', //副标题
x:'center' // 位置
},
legend: {
orient: 'vertical', //图例列表的布局朝向。
left: 'left', //距离左侧的距离
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie', //类型
radius : '60%', //饼图的半径
center: ['50%', '60%'], //饼图位置的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
}
]
})
}
}
}
</script> <style scoped>
.box{
margin-top:50px;
}
#pieChart{
width:500px;
height:500px;
}
</style>
