标签：图例 default Object 坐标轴 v2 echarts5 组件 type
<!-- tsx 简单图表组件 --> <template> <div class="chart" :style="{height:height,width:width}" :id="id"> </div> </template><script > // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） // 例如：import 《组件名称》 from '《组件路径》'; require("echarts/lib/component/legend") export default { // import引入的组件需要注入到对象中才能使用 components: {}, props: { id: { // 主键id type: String, default: '' }, title: { type: Object, default: () => { return { show: false, // 是否显示标题组件。 text: '', // 主标题文本，支持使用 \n 换行。 link: '', // 主标题文本超链接 textStyl: {}, // 标题样式 subtext: '', // 副标题 } } }, legend: { type: Object, default: () => { return { type: '', //'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。 show: false, // 展示 left: "auto", // 图例组件离容器左侧的距离 top: 'auto', // 图例组件离容器上侧的距离。 right: "auto", // 图例组件离容器右侧的距离。 bottom: 'auto', // 图例组件离容器下侧的距离。 width: 'auto', // 图例组件的宽度。默认自适应。 height: 'auto', // 图例组件的高度 orient: 'horizontal', // 图例列表的布局朝向。'horizontal' 'vertical' align: 'auto', // 图例标记和文本的对齐 } } }, xAxis: { type: Object, default: () => { return { show: true, position: "", // 'top''bottom' type: "", // 'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。'time' 时间轴，适用于连续的时序数据'log' 对数轴。适用于对数数据。 name: "", // 坐标轴名称。 nameLocation: "", // 'start''middle' 或者 'center''end' min: "", // 坐标轴刻度最小值。 max: "", // 坐标轴刻度最大值。 splitNumber: '', // 坐标轴的分割段数 boundaryGap: true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。 } } }, yAxis: { type: Object, default: () => { return { show: true, position: "", // 'top''bottom' type: "", // 'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。'time' 时间轴，适用于连续的时序数据'log' 对数轴。适用于对数数据。 name: "", // 坐标轴名称。 nameLocation: "", // 'start''middle' 或者 'center''end' min: "0", // 坐标轴刻度最小值。 max: "", // 坐标轴刻度最大值。
} } }, radar: { // 雷达图坐标系组件 type: Object, }, dataZoom: { // 用于区域缩放 type: Object, }, tooltip: { // 提示框组件。 type: Object, default: () => { return { show: true, trigger: '', // 'item'数据项图形触发 'axis' 坐标轴触发 } } }, dataset: { // 用于单独的数据集声明 type: Object, default: () => { return { source: {},// 原始数据 建议看一下文档 } } }, series: { // 使用的图表 type: Object | Array, default: () => { return [{ type: '',// line折线图`bar柱状图`pie饼图`scatter散点`radar雷达图 name: "", //系列名称 stack: "", // 叠柱名称要相同 data: [] }] } }, width: { type: String, default: '800px' }, height: { type: String, default: '350px' },
}, data () { // 这里存放数据 return {
} }, // 过滤器 filters: {}, // 监听属性 类似于data概念 computed: {}, // 监控data中的数据变化 watch: { series: { deep: true, handler (val) { console.log('图表监控') this.initialization() } } }, // 方法集合 methods: { initialization () { let Chart = this.$echarts.init(document.getElementById(this.id)); let echarts = { title: this.title, tooltip: this.tooltip, legend: this.legend, series: this.series, yAxis: !this.radar ? this.yAxis : [{ show: false }], xAxis: !this.radar ? this.xAxis : [{ show: false }], radar: this.radar }
Chart.setOption(echarts) } }, // 生命周期 - 创建完成（可以访问当前this实例） created () {
}, // 生命周期 - 挂载完成（可以访问DOM元素） mounted () { this.initialization() }, beforeCreate () { }, // 生命周期 - 创建之前 beforeMount () { }, // 生命周期 - 挂载之前 beforeUpdate () { }, // 生命周期 - 更新之前 updated () { }, // 生命周期 - 更新之后 beforeDestroy () { }, // 生命周期 - 销毁之前 destroyed () { }, // 生命周期 - 销毁完成 ctivated () { } // 如果页面有keep-alive缓存功能，这个函数会触发 } </script>
<style lang='scss' scoped> // @import url(); 引入公共css类 </style>
标签：图例,default,Object,坐标轴,v2,echarts5,组件,type 来源： https://www.cnblogs.com/tongshuangxiong/p/15722712.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。