vue项目实战：echarts的使用 和 按钮权限 自定义指令的使用
<!--
* @Description: 首页 dashboard/index.vue
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-06-12 09:15:41
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:34:57
-->
<!-- -->
<template>
<div class="dashboard-content-box">
<div class="section-one">
<h1>按钮权限测试</h1>
<div class="permit-btn">
<el-button type="primary" size="mini" v-permission="['100000801']">新增（其他一样用法）</el-button>
<el-button type="primary" size="mini">修改{{startDate}}</el-button>
<el-button type="primary" size="mini">编辑{{testDate}}</el-button>
</div>
<div>
<img :src="imgUrl" @error="handleError" alt />
</div>
<div id="myChart" :style="{width: '800px', height: '400px'}"></div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
//这里存放数据
return {
imgUrl:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg",
startDate: new Date().Format("yyyy-MM-dd hh:mm:ss"),
testDate: new Date().Format("yyyy年MM月dd日"), // 2020年08月12日
};
},
created() {},
mounted() {
this.drawLine();
},
methods: {
handleError(e) {
e.target.src = reqiure("@/assets/logo.png"); // 有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片（或者通过配置 transformToRequire 后，就可以直接配置）
},
// 绘图
drawLine() {
// 基于准备好的dom，初始化echarts实例 ---- 以下的配置汇聚了基本的 echarts 在项目中的需求具体参照官网
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 图表配置
let options = {
title: {
show: true, // 是否显示标题组件
text: "Vue中使用echarts的demo\n（支持换行）",
link: 'https://www.baidu.com/',
textStyle:{
color: '#333'
},
subtext: '我是echarts的副标题\n（也支持换行）', // 其他属性和 text有的 一样
textAlign: 'auto', // 整体（包括 text 和 subtext）的水平对齐 'auto'、'left'、'right'、'center'
},
// 图例组件
legend: {
show: true, // 是否显示图例
type: 'plain', // 'plain'：普通图例。缺省就是普通图例。 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
orient: 'vertical', // 图例列表的布局朝向 水平的 'horizontal' 垂直的 'vertical'
align: 'left', // 'auto' 'left' 'right'
padding: 5, // 图例内边距 间距大小 也可以是一个数组[5,5,5,5]
itemGap: 5, // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
itemWidth: 40, // 图例标记的图形宽度
itemHeight: 20, // 图例标记的图形高度
// 使用回调函数
formatter: function (name) {
return '图例 ' + name;
}
},
toolbox: {
show: true, // 是否显示工具栏组件
feature: {
dataView: {
//数据视图
show: true,
},
restore: {
//重置
show: true,
},
dataZoom: {
//数据缩放视图
show: true,
},
saveAsImage: {
//保存图片
show: true,
},
magicType: {
//动态类型切换
type: ["bar", "line"],
},
},
},
// 提示框组件。鼠标移上去展示的效果
tooltip: {
show: true, // 是否显示提示框组件，包括提示框浮层和 axisPointer。
formatter: function (params) {
console.log(params, "params");
return `<div class="showBox">${params.seriesName}：${params.name}---${params.value}</div>`;
},
},
// 直角坐标系 grid 中的 x 轴 的配置
xAxis: {
show: true, // 是否显示
// 坐标轴类型 'value' 数值轴，轴上的是数字 'category' 类目轴 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。'time' 时间轴
type: "category",
position: "bottom", // 'top' ,默认 'bottom'
name: "水果分类", // 坐标轴名称
nameLocation: "middle", // 坐标轴名称显示位置 'start' 'middle' 或者 'center' 默认：'end'
// 坐标轴名称的文字样式
nameTextStyle: {
fontStyle: "italic", // 'normal' 'italic' 'oblique' 具体看 https://echarts.apache.org/zh/option.html#xAxis.nameTextStyle
},
nameGap: 20, // 坐标轴名称与轴线之间的距离
inverse: true, // 是否是反向坐标轴
axisLine: {
show: false, // 是否显示x坐标轴轴线
symbol: "none", // 轴线两边的箭头
},
axisTick: {
show: false, // 是否显示坐标轴刻度线
interval: "auto", // 坐标轴刻度的显示间隔，在类目轴中有效。 number Function
// 刻度线样式
lineStyle: {
color: "#fff",
},
inside: true, // 坐标轴刻度是否朝内，默认朝外
},
// 坐标轴次刻度线相关设置
minorTick: {
show: false, // 是否显示次刻度线
},
// 坐标轴刻度标签的相关设置
axisLabel: {
show: false, // 是否显示刻度标签 刻度线数据（数字或者文字）不见了
},
// 网格线
splitLine: {
show: false, // 是否显示分隔线。默认数值轴显示，类目轴不显示
},
// 类目数据，在类目轴（type: 'category'）中有效
data: ["橙子", "橘子", "柚子", "榴莲", "水蜜桃", "栗子"],
},
yAxis: {
// 配置如同x轴 更多参考 https://echarts.apache.org/zh/option.html#yAxis
},
series: [
{
name: "销量",
type: "bar", // line 折线图 bar 柱状图 pie 饼图
data: [15, 20, 37, 15, 8, 23],
},
],
};
myChart.setOption(options);
},
},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！
