首先，先创建一个div
<div id="agricultures" :style="{width: '100%', height: '100%'}"></div>
子承父的宽高
然后import echarts from "echarts"，页面内引入
mounted() { //执行methods事件
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("agricultures"));
myChart.setOption({ }）
window.onresize = myChart.resize; // 自适应
}
接下来，是饼图，柱状图，折线图常用属性值
myChart.setOption({
color: ["rgba(243, 81, 81, 1)"] // 需要颜色的可在最外层设定颜色
tooltip: {
trigger: 'axis', // trigger 设置触发类型，饼图柱状是'item' ¦ 折线是'axis'
show: false, //不想显示设为false
formatter: "{b} : {c}"
formatter(params){ //自定义鼠标划过时提示的东西
for(x in params){
return params[x].name +":"+params[x].data.value;
}
}
},
title : { //用不到标题直接删除即可
text: '某地区蒸发量和降水量',
subtext: '纯属虚构' // 小标题，一般不用
},
grid: { // 图形在盒子内的上下左右拉伸
top: "20%",
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true
},
legend: {
data:[],
bottom: "1%",
left: "10%",
itemWidth: 10,
itemHeight: 10,
icon: 'circle',
type: 'scroll', // 需要翻页时写
orient: "vertical", // 可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
itemGap: 5, //设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
textStyle: { //样式设定
color: "#fff",
align: "right",
x: "right",
textAlign: "right"
},
pageButtonItemGap: 10, // 按钮和页信息之间的间隔
pageButtonGap: 10, // 控制块和图例项之间的间隔
pageIconInactiveColor: "orange", // 按钮未激活颜色
pageIconColor: "#009ef4", // 按钮颜色
pageIconSize: [15, 30], // 翻页按钮的大小 [宽, 高]
pageTextStyle: { // 文字样式
color: "#fff",
fontSize: 12 // '90%' 字体也可以百分比设置
},
formatter: function(name) { // 自定义图例
var total = 0;
var target;
for (var i = 0, l = xuenum.length; i < l; i++) {
total += xuenum[i].value;
if (xuenum[i].name == name) {
target = xuenum[i].value;
}
}
return name + " " + target + "人";
}
show: false, //不想显示设为false
},
// 如果是柱状折线图会有 xAxis yAxis
xAxis: {
show: true, // 是否显示
position: 'bottom', // x轴的位置
offset: 0, // x轴相对于默认位置的偏移
type: 'category', // 轴类型， 默认为 'category'
name: '', // 轴名称
nameLocation: 'end', // 轴名称相对位置
nameTextStyle: { // 坐标轴名称样式
color: 'red',
padding: [5, 0, 0, -5]
},
boundaryGap: false, //X轴顶到Y轴不留空隙
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameRotate: 0, // 坐标轴名字旋转
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
symbol: ['none', 'arrow'], // 是否显示轴线箭头
symbolSize: [8, 8], // 箭头大小
symbolOffset: [0, 7], // 箭头位置
// ------ 线 ---------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐标轴 刻度
show: true, // 是否显示
inside: true, // 是否朝内
length: 3, // 长度
lineStyle: { // 默认取轴线的样式
color: 'red',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 5, // 刻度标签与轴线之间的距离
color: 'red' // 默认取轴线的颜色
},
splitLine: { // gird区域中的分割线
show: false, // 是否显示
lineStyle: {
// color: 'red',
// width: 1,
// type: 'solid'
}
},
splitArea: { // 网格区域
show: false // 是否显示，默认为false
},
data: []
},
yAxis: {
show: true, // 是否显示
position: 'left', // y轴位置
offset: 0, // y轴相对于默认位置的偏移
type: 'value', // 轴类型，默认为 ‘category’
name: '', // 轴名称
nameLocation: 'end', // 轴名称相对位置value
nameTextStyle: { // 坐标轴名称样式
color: '#fff',
padding: [5, 0, 0, 5] // 坐标轴名称相对位置
},
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameRotate: 270, // 坐标轴名字旋转
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
// ----- 箭头 -----
symbol: ['none', 'arrow'], // 是否显示轴线箭头
symbolSize: [8, 8], // 箭头大小
symbolOffset: [0, 7], // 箭头位置
// ----- 线 -------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐标轴的刻度
show: true, // 是否显示
inside: true, // 是否朝内
length: 3, // 长度
lineStyle: {
color: 'red', // 默认取轴线的颜色
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴的标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 8, // 刻度标签与轴线之间的距离
color: 'red', // 默认轴线的颜色
},
splitLine: { // gird 区域中的分割线
show: true, // 是否显示
lineStyle: {
color: '#666',
width: 1,
type: 'dashed'
}
},
splitArea: { // 网格区域
show: false // 是否显示，默认为false
}
},
series:[
{ // 如果是饼图
name:'', // 一般不用填
avoidLabelOverlap: false,（是否启用防止标签重叠策略，默认默认开启）
type: "pie",
radius: ["50%", "70%"], // 环形饼图设置2个，普通的一个就行了
center: ["35%", "50%"], // 饼图在div中的位置
clickable:false, //是否开启点击
minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
hoverAnimation:false, //是否开启 hover 在扇区上的放大动画效果。
silent: true, //图形是否不响应和触发鼠标事件
label: {
normal: {
show: false,
position: "center",
formatter: "{text|{d}人}\n{value|{b}}",
rich: {
text: {
fontSize: 12,
align: "center",
verticalAlign: "middle",
padding: 5
},
value: {
fontSize: 12,
align: "center",
verticalAlign: "middle"
}
}
},
emphasis: {
show: true,
textStyle: {
fontSize: "14",
fontWeight: "bold"
}
}
},
labelLine: { // 设置值域的那指向线
normal: {
show: false
}
},
data: xuenum // 外部定义变量
}
},
{ // 柱状图常用属性
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
type: 'bar', // 类型
label: { // 图形上的文本标签
show: false,
position: 'insideTop', // 相对位置
rotate: 0, // 旋转角度
color: '#eee'
},
itemStyle: { // 图形的形状
color: 'blue',
barBorderRadius: [18, 18, 0 ,0]
},
barWidth: 20, // 柱形的宽度
barCategoryGap: '20%', // 柱形的间距
data: []
}
stack: '总量' // 这个属性是用于堆叠柱状图的，如果不需要请去掉，如果想实现堆叠效果，请在每组数据里加上一行这个，即可实现哦
},
{
type: 'line',
// 设置小圆点消失
// 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
symbol: 'none',
// 设置折线弧度，取值：0-1之间，默认是true
smooth: 0.5,
// 设置折线上圆点大小
symbolSize:8,
itemStyle: {
normal: {
// 拐点上显示数值
label : {
show: true
},
lineStyle:{
// 使用rgba设置折线透明度为0，可以视觉上隐藏折线
color: 'rgba(0,0,0,0)'
}
}
},
areaStyle: { // 折线渐变色设置
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(137, 189, 27, 0.3)"
},
{
offset: 0.8,
color: "rgba(137, 189, 27, 0)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10
}
},
}
]
})