效果图

背景图片

下载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 () { // 基于准备好的dom，初始化echarts实例 let chart = this.$echarts.init(document.getElementById('chart')) // 监听屏幕变化自动缩放图表 window.addEventListener('resize', function () { chart.resize() }) // 绘制图表 chart.setOption({ // 设置图表的位置 grid: { x: 60, // 左间距 y: 80, // 上间距 x2: 60, // 右间距 y2: 40, // 下间距 containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景 }, // dataZoom 组件 用于区域缩放 dataZoom: [ { type: 'inside', xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴 // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100 start: 0, end: 80 } ], // 图表主标题 title: { text: '短袖销售额', // 主标题文本，支持使用 \n 换行 top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比 left: 'center', // 值: 'left', 'center', 'right' 同上 textStyle: { // 文本样式 fontSize: 24, fontWeight: 600, color: '#fff' } }, // 设置自定义文字 graphic: [ { type: 'text', // 图形元素类型 left: 35, // 进行定位 bottom: 18, style: { // 文本样式 fill: '#cdd3ee', text: '(月份)', font: 'normal 14px Microsoft' // style | weight | size | family } } ], // 提示框组件 tooltip: { trigger: 'axis', // 触发类型, axis: 坐标轴触发 axisPointer: { type: 'line' // 指示器类型 }, // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无） formatter: '{b}<br />{a0}: {c0}万<br />{a1}: {c1}%' }, // 图例组件 legend: { // 图例的数据数组 data: [ { name: '已销售' // 图例项的名称 与 series 里的 name 相对应 }, { name: '销售率' } ], itemWidth: 15, // 图例标记的图形宽度 itemHeight: 15, // 图例标记的图形高度 // 图例项的 icon 值: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' icon: 'roundRect', top: 13, // 定位 right: 10, textStyle: { // 文本样式 fontSize: 16, color: '#cdd3ee' } }, // X轴 xAxis: { show: true, // 不设置默认值为 true // 坐标轴类型, 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据 type: 'category', // 坐标轴轴线 axisLine: { lineStyle: { type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted' width: 1, // 坐标轴线线宽, 不设置默认值为 1 color: '#cdd3ee' // 坐标轴线线的颜色 } }, // 坐标轴刻度 axisTick: { show: false }, // 分隔线 splitLine: { show: false }, // 坐标轴刻度标签 axisLabel: { fontSize: 16, // 文字的字体大小 color: '#cdd3ee', // 刻度标签文字的颜色 // 使用函数模板 传入的数据值 -> value: number|Array, formatter: function (value) { return value.replace(/[\u4e00-\u9fa5]/g, '') } }, // 类目名称 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis: [ // 左侧Y轴 { type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据 name: '单位/万', // 坐标轴名称 nameLocation: 'end', // 坐标轴名称显示位置 'start', 'middle' 或者 'center', 'end' nameTextStyle: { // 坐标轴名称的文字样式 fontSize: 16 }, nameGap: 13, // 坐标轴名称与轴线之间的距离 // 坐标轴刻度 axisTick: { show: true // 是否显示坐标轴刻度 默认显示 }, // 坐标轴轴线 axisLine: { // 是否显示坐标轴轴线 默认显示 show: true, // 是否显示坐标轴轴线 默认显示 lineStyle: { // 坐标轴线线的颜色 color: '#cdd3ee' } }, // 坐标轴在图表区域中的分隔线 splitLine: { show: false // 是否显示分隔线。默认数值轴显示 }, // 坐标轴刻度标签 axisLabel: { show: true, // 是否显示刻度标签 默认显示 fontSize: 16, // 文字的字体大小 color: '#cdd3ee', // 刻度标签文字的颜色 // 使用字符串模板，模板变量为刻度默认标签 {value} formatter: '{value}' } }, // 右侧Y轴 { // 坐标轴刻度 axisTick: { show: true // 是否显示坐标轴刻度 默认显示 }, // 坐标轴轴线 axisLine: { // 是否显示坐标轴轴线 默认显示 show: true, // 是否显示坐标轴轴线 默认显示 lineStyle: { // 坐标轴线线的颜色 color: '#cdd3ee' } }, // 坐标轴在图表区域中的分隔线 splitLine: { show: false // 是否显示分隔线 默认数值轴显示 }, axisLabel: { show: true, fontSize: 16, color: '#cdd3ee', // 使用字符串模板，模板变量为刻度默认标签 {value} formatter: '{value}%' } } ], // 系列列表 series: [ { type: 'bar', // 系列类型 name: '已销售', // 系列名称, 用于tooltip的显示, legend 的图例筛选 barMaxWidth: 15, // 柱条的最大宽度，不设时自适应 barGap: 0, // 不同系列的柱间距离, 为百分比 默认值为30% // 图形上的文本标签 label: { show: false, fontSize: 16, color: '#fff' }, // 图形样式 itemStyle: { // 柱条的颜色, 这里是渐变色, 默认从全局调色盘 option.color 获取颜色 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#FAB363' // 0% 处的颜色 }, { offset: 1, color: '#FB7C2B' // 100% 处的颜色 }] }, barBorderRadius: [10, 10, 0, 0] // 圆角半径, 单位px, 支持传入数组分别指定 4 个圆角半径 }, // 系列中的数据内容数组 data: [200, 330, 400, 600, 830, 650, 690, 430, 550, 420, 420, 320] }, { type: 'line', // 系列类型 name: '销售率', // 系列名称, 用于tooltip的显示, legend 的图例筛选 symbol: 'circle', // 标记的图形 symbolSize: 10, // 标记的大小 yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用 // 图形的样式 itemStyle: { color: '#11abff' }, // 线的样式, 修改 lineStyle 中的颜色不会影响图例颜色, 一般不设置线的样式 lineStyle: { type: 'solid', // 线的类型 'solid', 'dashed', 'dotted' color: '#11abff' }, // 图形上的文本标签 label: { show: false, fontSize: 16, color: '#fff' }, // 系列中的数据内容数组 data: [20, 24, 33, 45, 63, 50, 42, 24, 23, 14, 20, 10] } ] }) } } } </script> <style scoped> .wrapper { width: 100%; } .wrapper .chart { width: 60%; height: 400px; margin: 100px 50px 0; border: 1px solid #eeeeee; background: url(../../public/static/bg.png) no-repeat; background-size: 100% 100%; } </style>