效果图
背景图片
下载ECharts
npm install echarts --save引入并注册全局ECharts
在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')在组件中使用ECharts
<template>
<div class='wrapper'>
<div class='chart' id='chart'></div>
</div>
</template>
<script>
export default {
data () {
return {}
},
mounted () {
this.drawChart()
},
methods: {
drawChart () {
let datas = [0,0,1,1,0,1]
// 基于准备好的dom，初始化echarts实例
const chart = this.$echarts.init(document.getElementById('chart'))
// 监听屏幕变化自动缩放图表
window.addEventListener('resize', function () { chart.resize() })
// 绘制图表
chart.setOption({
color: ['#74d1fd', '#009ae4', '#0071c1'],
// 设置图表的位置
grid: {
x: 40, // 左间距
y: 60, // 上间距
x2: 10, // 右间距
y2: 30, // 下间距
containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
},
// 提示框组件
tooltip: {
trigger: 'axis', // 触发类型, axis: 坐标轴触发
axisPointer: {
// 指示器类型 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
// 其实是种简写，表示启用两个正交的轴的 axisPointer。
type: 'none'
},
textStyle: {
color: '#cdd3ee' // 文字颜色
},
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
// 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
formatter: '{b}<br />{a0}: {c0}%'
},
// 图例组件
legend: {
textStyle: { // 文本样式
fontSize: 16,
color: '#cdd3ee'
},
top: 20, // 定位
selectedMode: false, // 取消图例上的点击事件
data: ['订单转化率'] // 图例的数据数组
},
// X轴
xAxis: {
type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
// 坐标轴刻度
axisTick: {
show: false // 是否显示坐标轴刻度 默认显示
},
// 坐标轴轴线
axisLine: { // 是否显示坐标轴轴线 默认显示
show: false // 是否显示坐标轴轴线 默认显示
},
// 坐标轴在图表区域中的分隔线
splitLine: {
show: false // 是否显示分隔线。默认数值轴显示
},
// 坐标轴刻度标签
axisLabel: {
show: false // 是否显示刻度标签 默认显示
}
},
yAxis: [
// 左侧Y轴
{
type: 'category', // 坐标轴类型, 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
// 坐标轴刻度
axisTick: {
show: false // 是否显示坐标轴刻度 默认显示
},
// 坐标轴轴线
axisLine: { // 是否显示坐标轴轴线 默认显示
show: false, // 是否显示坐标轴轴线 默认显示
lineStyle: { // 坐标轴线线的颜色
color: '#cdd3ee'
}
},
// 坐标轴在图表区域中的分隔线
splitLine: {
show: false // 是否显示分隔线。默认数值轴显示
},
// 坐标轴刻度标签
axisLabel: {
show: true, // 是否显示刻度标签 默认显示
fontSize: 16, // 文字的字体大小
color: '#cdd3ee', // 刻度标签文字的颜色
// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value}'
},
data: ['北京店', '上海店', '广州店', '深圳店', '杭州店', '厦门店'] // 类目数据，在类目轴（type: 'category'）中有效
},
// 右侧Y轴
{
type: 'category', // 坐标轴类型, 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
// 坐标轴轴线
axisLine: {
show: false
},
// 坐标轴刻度
axisTick: {
show: false
},
// 坐标轴刻度标签
axisLabel: {
show: true, // 是否显示刻度标签 默认显示
fontSize: 16, // 文字的字体大小
color: '#cdd3ee', // 刻度标签文字的颜色
margin: 10, // 刻度标签与轴线之间的距离
// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value}%'
},
data: [65, 30, 40, 60, 45, 70] // 类目数据，在类目轴（type: 'category'）中有效
},
// 右侧Y轴 图形
{
// 坐标轴轴线
axisLine: {
show: false
},
// 坐标轴刻度
axisTick: {
show: false
},
// 坐标轴刻度标签
axisLabel: {
margin: 50, // 刻度标签与轴线之间的距离
formatter: function (value, index) {
if (datas[index] === 0) {
return '{idx|}';
} else if (datas[index] === 1) {
return '{idx1|}';
}
},
rich: {
idx: {
padding: [0, 0, 4, 0], // 可以自行调整
backgroundColor: { // 必须是base64格式的图片
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAYAAADt...'
}
},
idx1: {
padding: [0, 0, 4, 0], // 可以自行调整
backgroundColor: { // 必须是base64格式的图片
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAYAAADt...'
}
}
}
},
data: [65, 30, 40, 60, 45, 70] // 类目数据，在类目轴（type: 'category'）中有效
}
],
// 系列列表
series: [
{
type: 'bar', // 系列类型
name: '订单转化率', // 系列名称, 用于tooltip的显示, legend 的图例筛选
barMaxWidth: 10, // 柱条的最大宽度，不设时自适应
showBackground: true, // 是否显示背景色
// 图形上的文本标签
label: {
show: false,
// 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
position: 'inside'
},
// 图形样式
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1089E7' // 0% 处的颜色
},
{
offset: 1,
color: '#56D0E3' // 100% 处的颜色
}
]
},
barBorderRadius: [0, 5, 5, 0] // 柱状图圆角
},
data: [65, 30, 40, 60, 45, 70] // 系列中的数据内容数组
},
// 背景
{
type: 'bar', // 系列类型
name: '背景', // 系列名称, 用于tooltip的显示, legend 的图例筛选
// 不同系列的柱间距离l，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
// 这在用柱子做背景的时候有用
barGap: '-100%',
barMaxWidth: 10, // 柱条的最大宽度，不设时自适应
itemStyle: {
normal: {
color: "rgba(28, 128, 213, 0.19)"
}
},
data: [100, 100, 100, 100, 100, 100]
},
// 发光小圆点
{
type: 'pictorialBar', // 系列类型
name: '圆点', // 系列名称, 用于tooltip的显示, legend 的图例筛选
symbol: 'circle', // 标记的图形
symbolSize: 14, // 标记的大小
symbolOffset: [0, 0], // 标记的偏移
symbolPosition: 'end', // 标记的位置
// 图形的样式
itemStyle: {
color: '#fff',
borderColor: '#56D0E3', // 阴影边框颜色
shadowColor: '#56D0E3', // 阴影颜色
shadowBlur: 10, // 图形阴影的模糊大小
shadowOffsetX: 1 // 阴影水平方向上的偏移距离
},
z: 10, // 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖
data: [65, 30, 40, 60, 45, 70] // 系列中的数据内容数组
}
]
})
}
}
}
</script>
<style scoped>
.wrapper {
width: 100%;
}
.wrapper .chart {
width: 60%;
height: 400px;
margin: 100px auto 0;
background: url(../../public/static/bg.png) no-repeat;
background-size: 100% 100%;
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
