摘要: 在后台管理系统中, 我们经常会遇到图表, 比如说: 柱形图, 饼状图, 折线图, 雷达图等等, 而用来写图表插件有很多, 我这里主要介绍 Echarts 在项目里怎么使用, 官网地址如下: https://echarts.baidu.com/index.html, 详细信息请阅览他们的官网文档和实例, 各种图表都比较完善.
本文流程:
1. 安装插件→2. 引入 Echarts→3. 创建图表→4. 修改样式→5. 接入数据
一. 安装插件
方法一: NPM 安装 Echarts
NPM install echarts -S
方法二: cnpm 安装 Echarts
1. 首先我们需要安装 cnpm
NPM install -g cnpm --registry=https://registry.npm.taobao.org
2. 然后
cnpm install echarts -S
二. 引入 Echarts
方法一: 全局引入
打开 main.JS 文件引入 Echarts
import echarts from 'echarts'
然后将 echart 添加到 vue 的原型上, 这样就可以全局使用了
Vue.prototype.$echarts = echarts
方法二: 局部引入
全局引入会将所有的 echarts 图表打包, 导致体积过大, 所以我觉得最好还是按需要来局部引入, 比如我们需要引入一个柱状图
- // 引入基本模板
- let echarts = require('echarts/lib/echarts')
- // 引入柱状图组件
- require('echarts/lib/chart/bar')
- // 引入提示框和 title 组件
- require('echarts/lib/component/tooltip')
- require('echarts/lib/component/title')
这里 require 直接从 node_modules 中查找文件位置进行引入
三. 创建图表
当你安装完插件和在页面里面引入图表之后, 那么恭喜你可以创建图表了~
第一步: 你首先得创造一个图表的容器, 宽高必须是行内样式, 单位必须是 px
- <template>
- <div id="myChart" :style="{width:'1000px', height:'600px'}"></div>
- </template>
注意: 这样会出现一个问题, 因为由于必须固定好宽高, 你缩小屏幕的时候, 图表不会随之适应的缩小, 刷新页面才能适应, 解决方法的实现请接着往下看
第二步: 绘制图表, 这里我们要注意, echarts 初始化应在钩子函数 mounted()中, 挂载之后调用
- <script>
- export default {
- data() {
- return {
- }
- },
- // 钩子函数
- mounted(){
- this.draw();
- },
- methods: {
- draw(){
- // 初始化 echarts 实例
- let myChart = this.$echarts.init(document.getElementById('myChart'))
- // 绘制图表
- var option = {
- // 此处占用篇幅过大, 先省略等下会进行解释
- }
- // 防止越界, 重绘 canvas
- Windows.onresize = myChart.resize;
- myChart.setOption(option);// 设置 option
- }
- }
- }
- </script>
解释:
第一点: 省略处为绘制图表的代码, 首先, 你打开 Echarts 官网, 找到实例, 选取你项目里面需要用到的图表模板 (样式差不多就行, 下文会教你如何修改图表样式), 点进去, 然后你可以看到左侧的代码, 把 option = {} 括号里面的内容放置到我上方省略的代码处, 运行, 你页面即可以看到你所需要的图表;
第二点: 下方代码防止越界, 重汇 canvas 处, 即为可以解决掉屏幕缩小, 图表不会随之适应的缩小的方法, 原理为当浏览器发生 resize 事件的时候, 让其触发 echart 的 resize 事件, 重绘 canvas
- // 防止越界, 重绘 canvas
- Windows.onresize = myChart.resize;
- myChart.setOption(option);// 设置 option
四. 修改样式
当你创建完图表之后, 你会发现你的图表和 UI 给的样式差距太大, 这样写肯定是不能过关的, 所以你得修改图表样式, 现在我从图表的左上角说到右下角, 如何去更改图表样式, 首先先上两张图表的差异图:
图一为 Echarts 未修改过的柱形图:
图二为修改样式之后的柱形图:
样式修改方法:
1. 左上角图例处:
- // 图例
- legend: {
- data: ['降水量'],// 与 series 的 name 对应
- left: '75%',// 图例的离左边位置, 可以用像素, 可以用百分比, 也可以用 center,right 等
- top: 12px,// 图例离顶部的位置
- itemWidth: 10,// 图例图标的宽
- itemHeight: 10,// 图例图标的高
- textStyle: {
- color: '#878787',// 文字的具体的颜色
- }
- },
2. 右上角切换图形处:
- toolbox: {
- show : true,// 显示
- feature : {
- magicType : {show: true, type: ['line', 'bar']},
- },// 柱形图和折线图切换
- right: '6%',// 离右边的距离
- },
3. 中部图表 X 轴修改:
- //x 轴
- xAxis: {
- type: 'category',
- data: ['1 月', '2 月', '3 月', '4 月', '5 月'],//x 轴的数据
- splitLine: {show: false},// 去除网格分割线
- // splitArea: {show: true},// 保留网格区域
- axisLine: {// 坐标线
- lineStyle: {
- type: 'solid',
- color: '#d8d8d8',// 轴线的颜色
- width:'1'// 坐标线的宽度
- }
- },
- axisTick: {// 刻度
- show: false// 不显示刻度线
- },
- axisLabel: {
- textStyle: {
- color: '#878787',// 坐标值的具体的颜色
- }
- },
- splitLine: {
- show: false// 去掉分割线
- },
- },
4. 中部图表 Y 轴修改:
- yAxis: {
- name: '单位: 次',// 轴的名字, 默认位置在 y 轴上方显示, 也可不写
- max: 30,// 最大刻度
- type: 'value',
- axisLine: {// 线
- show: false
- },
- axisTick: {// 刻度
- show: false
- },
- axisLabel: {
- textStyle: {
- color: '#878787',// 坐标值得具体的颜色
- }
- },
- minInterval: 5,// 标值的最小间隔
- splitLine: {
- lineStyle: {
- color: ['#f6f6f6'],// 分割线的颜色
- }
- }
- },
5. 柱状图形修改:
- series: [{
- name: '数量',// 每组数据的名字, 与图例对应
- data: [200, 300, 400, 350, 100],// 数据
- type: 'bar',// 柱状图
- itemStyle: {
- normal: {
- color: '#FD6B71',// 设置柱子颜色
- abel: {
- show: true,// 柱子上显示值
- position: 'top',// 值在柱子上方显示
- textStyle: {
- color: '#FD6B71'// 值得颜色
- }
- }
- }
- },
- barWidth: 15// 设置柱子宽度, 单位为 px
- }],
好吧! 整体代码我也发一份, 当你安装好插件和全局引入后, 你可以用以下代码进行测试有没有成功, 代码如下:
- <template>
- <div class="MyAchievement">
- <div class="MyAchievement-echart">
- <div class="echart-title">我的业绩</div>
- <div class="echart-content">
- <div id="myChart" :style="{width:'1500px', height:'460px'}"></div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- }
- },
- mounted(){
- this.drawLine();
- },
- methods: {
- drawLine(){
- var myChart = this.$echarts.init(document.getElementById('myChart'));// 获取容器元素
- var option = {
- tooltip : {
- trigger: 'axis'
- },
- grid: {
- left: '6%',
- right: '6%',
- bottom: '6%',
- containLabel: true
- },
- legend: {
- data:['订单数量','我的业绩'],
- left: '6%',
- top: 'top',
- itemWidth: 15,// 图例图标的宽
- itemHeight: 15,// 图例图标的高
- textStyle: {
- color: '#3a6186',
- fontSize:20,
- }
- },
- toolbox: {
- show : true,
- feature : {
- magicType : {show: true, type: ['line', 'bar']},
- },
- right: '6%',
- },
- calculable : true,
- xAxis : [
- {
- type : 'category',
- data : ['01-01','01-02','01-03','01-04','01-05','01-06','01-07'],
- splitLine: {show: false},// 去除网格分割线
- axisTick: {// 刻度
- show: false// 不显示刻度线
- },
- axisLine: {// 坐标线
- lineStyle: {
- type: 'solid',
- color: '#e7e7e7',// 轴线的颜色
- width:'2'// 坐标线的宽度
- }
- },
- axisLabel: {
- textStyle: {
- color: '#3a6186',// 坐标值的具体的颜色
- }
- },
- splitLine: {
- show: false// 去掉分割线
- },
- }
- ],
- yAxis : [
- {
- type : 'value',
- axisLine: {// 线
- show: false
- },
- axisTick: {// 刻度
- show: false
- },
- axisLabel: {
- textStyle: {
- color: '#3a6186',// 坐标值的具体的颜色
- }
- },
- splitLine: {
- lineStyle: {
- color: ['#e7e7e7'],// 分割线的颜色
- }
- }
- }
- ],
- series : [
- {
- name:'订单数量',
- type:'bar',
- barWidth: 20,
- data:[20, 35, 55, 60, 120, 150, 140],
- itemStyle: {
- normal: {
- color: '#00abf7',// 设置柱子颜色
- label: {
- show: true,// 柱子上显示值
- position: 'top',// 值在柱子上方显示
- textStyle: {
- color: '#00abf7',// 值的颜色
- fontSize:16,
- }
- }
- }
- },
- },
- {
- name:'我的业绩',
- type:'bar',
- barWidth: 20,
- data:[40, 50, 90, 110, 130, 160, 150],
- itemStyle: {
- normal: {
- color: '#ff4f76',// 设置柱子颜色
- label: {
- show: true,// 柱子上显示值
- position: 'top',// 值在柱子上方显示
- textStyle: {
- color: '#ff4f76',// 值的颜色
- fontSize:16,
- }
- }
- }
- },
- }
- ]
- };
- // 防止越界, 重绘 canvas
- Windows.onresize = myChart.resize;
- myChart.setOption(option);// 设置 option
- }
- }
- }
- </script>
- <style lang="sCSS" scoped>
- .MyAchievement{
- display: flex;
- flex-direction: column;
- padding:0px 90px;
- }
- .MyAchievement .MyAchievement-echart{
- width: 100%;
- height: 570px;
- border-radius: 10px;
- border:1px solid #d3d9e9;
- box-shadow: 4px 6px 10px -2px #d3d9e9;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- }
- .MyAchievement-echart .echart-title{
- width: 100%;
- height: 70px;
- background-color: #00abf7;
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
- font-size: 26px;
- color: #fff;
- text-align: center;
- line-height: 75px;
- }
- .MyAchievement-echart .echart-content{
- width: 100%;
- height: 500px;
- display: flex;
- // align-items: center;
- justify-content: center;
- }
- .echart-content #myChart{
- margin-top: 35px;
- }
- </style>
五. 接入数据
就比如上方柱形图, 数据为 data: [200, 300, 400, 350, 100], 我们通过调用接口, 把接口数据替换掉之前写死的数据即可, 比如:
- axios({
- method:'POST',
- url:this.API.drawline,
- }).then(response => {
- // 获取数据
- this.draw= response.data;
- // 把原先写死的数据替换为接口数据即可
- //......
- }).catch(err => {
- console.log(err);
- })
总结: 希望对大家有所帮助, 有什么问题欢迎留言, 我将第一时间更改, 也谢谢大家能阅读到这里, 你们的支持是我前进的动力!
来源: https://www.cnblogs.com/hejun26/p/10456774.html