1、安装echarts依赖
npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
2、创建图表
在main.js中全局引入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、在Echarts.vue中
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
4、初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
// 指定图表的配置项和数据
var option = {
//-------------- 标题 title ----------------
title: {
// text: '主标题',
// textStyle:{ //---主标题内容样式
// color:'#fff'
// },
// subtext:'副标题', //---副标题内容样式
// subtextStyle:{
// color:'#bbb'
// }
padding: [0, 0, 0, 0] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
},
//---------------- 图例 legend -----------------
legend: {
type: 'plain',
top: '20', //----图例相对容器位置,top\bottom\left\right
selected: {
'销量': true, //----图例选择,图形加载出来会显示选择的图例,默认为true
},
textStyle: { //----图例内容样式
color: '#30395E', //---所有图例的字体颜色
},
tooltip: { //图例提示框,默认不显示
show: true,
color: 'red',
},
data: [ //----图例内容
{
name: '',
icon: 'circle', //----图例的外框样式
textStyle: {
color: '#30395E', //----单独设置某一个图例的颜色
}
}
],
},
//-------------- 提示框 -----------------
tooltip: {
show: true, //---是否显示提示框,默认为true
trigger: 'item', //---数据项图形触发
axisPointer: { //---指示样式
type: 'shadow',
axis: 'auto',
},
padding: 5,
textStyle: { //---提示框内容样式
color: "#fff",
},
},
//------------- grid区域 ----------------
grid: {
show: false, //---是否显示直角坐标系网格
top: 20, //---相对位置,top\bottom\left\right
containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
tooltip: { //---鼠标焦点放在图形上,产生的提示框
show: true,
trigger: 'item', //---触发类型
backgroundColor: 'rgba(255,255,255,0.9)',
textStyle: {
color: '#30395E',
},
}
},
//------------- x轴 -------------------
xAxis: {
show: true, //---是否显示
position: 'bottom', //---x轴位置
offset: 0, //---x轴相对于默认位置的偏移
type: 'category', //---轴类型,默认'category'
// name:'', //---轴名称
nameLocation: 'end', //---轴名称相对位置
nameTextStyle: { //---坐标轴名称样式
color: "#30395E",
padding: [5, 0, 0, -5], //---坐标轴名称相对位置
},
nameGap: 15, //---坐标轴名称与轴线之间的距离
axisLine: { //---坐标轴 轴线
show: true, //---是否显示
//------------------- 箭头 -------------------------
// symbol:['none', 'arrow'], //---是否显示轴线箭头
//------------------- 线 -------------------------
lineStyle: {
color: '#30395E',
width: 1,
type: 'solid',
},
},
axisTick: { //---坐标轴 刻度
show: true, //---是否显示
inside: true, //---是否朝内
length: 3, //---长度
lineStyle: {
//color:'red', //---默认取轴线的颜色
width: 1,
type: 'solid',
},
},
axisLabel: { //---坐标轴 标签
show: true, //---是否显示
inside: false, //---是否朝内
align: "center",
verticalAlign: "middle",
rotate: -50,
//---旋转角度
margin: 30, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine: { //---grid 区域中的分隔线
show: false, //---是否显示,'category'类目轴不显示,此时我的X轴为类目轴,splitLine属性是无意义的
lineStyle: {
//color:'red',
//width:1,
//type:'solid',
},
},
splitArea: { //--网格区域
show: false, //---是否显示,默认false
},
data: [],
},
//---------------------- y轴 ------------------------
yAxis: {
show: true, //---是否显示
position: 'left', //---y轴位置
offset: 0, //---y轴相对于默认位置的偏移
boundaryGap: [0, "20%"],
type: 'value', //---轴类型,默认'category'
// name:'', //---轴名称
nameLocation: 'end', //---轴名称相对位置value
nameTextStyle: { //---坐标轴名称样式
color: "#30395E",
padding: [5, 0, 0, 5], //---坐标轴名称相对位置
},
nameGap: 15, //---坐标轴名称与轴线之间的距离
axisLine: { //---坐标轴 轴线
show: true, //---是否显示
//------------------- 箭头 -------------------------
// symbol:['none', 'arrow'], //---是否显示轴线箭头
//------------------- 线 -------------------------
lineStyle: {
color: '#30395E',
width: 1,
type: 'solid',
},
},
axisTick: { //---坐标轴 刻度
show: true, //---是否显示
inside: true, //---是否朝内
length: 1, //---长度
lineStyle: {
//color:'red', //---默认取轴线的颜色
width: 1,
type: 'solid',
},
},
axisLabel: { //---坐标轴 标签
show: true, //---是否显示
inside: false, //---是否朝内
rotate: 0, //---旋转角度
margin: 8, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine: { //---grid 区域中的分隔线
show: true, //---是否显示,'category'类目轴不显示,此时我的y轴为类目轴,splitLine属性是有意义的
lineStyle: {
color: '#CFD3DC',
width: 1,
type: 'solid', //---类型
},
},
splitArea: { //--网格区域
show: false, //---是否显示,默认false
},
},
//------------ 内容数据 -----------------
series: [
{
// name: '', //---系列名称
type: 'bar', //---类型
legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
label: { //---图形上的文本标签
show: false,
position: 'insideTop', //---相对位置
rotate: 0, //---旋转角度
color: '#1F4AB1',
},
itemStyle: { //---图形形状
color: '#1F4AB1',
barBorderRadius: [0, 0, 0, 0],
},
barWidth: '24', //---柱形宽度
barCategoryGap: '25%', //---柱形间距
legend: {
data: ['数值'],
top: '30'
},
data: []
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
注意:如果echarts不起作用,可以适当降低echarts版本