echarts配置项 |
您所在的位置：网站首页 › echartsvue饼图 › echarts配置项 |
echarts配置项
|
这篇文章主要介绍了Vue中使用Echarts的方式,本文将具体属性介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下 在veu中使用echarts，是需要命令行安装的 npm install echarts在main.js中引入 import echarts from 'echartsVue.prototype.$echarts=echarts此处以环形图为例 首先页面创建一个div，自己写一个样式 methods:{demo:function(){var demo = this.$echarts.init(document.getElementById('demo'));var option = {title: {text: "环形图demo",show: true, //是否显示组件标题 true显示，false隐藏link: 'https://www.baidu.com/', //主标题文本超链接target: 'blank', //指定窗口打开标题链接 self是当前窗口打开，blank是新窗口打开x: 'center', //标题居中textStyle: {color: 'blue', //主标题颜色fontStyle: 'oblique', //主标题字体风格 italic、oblique斜体 normal 正常fontWeight: 'normal', //主标题文字字体粗细 normal 正常 bold 加粗fontFamily: 'Microsoft YaHei', //主标题文字的字体系列 serif、monospace、Arial、Courier New、 Microsoft YaHeifontSize: 16, //主标题文字的字体大小align: 'left', //文字水平对齐方式 默认自动verticalAlign: 'top', //文字垂直对齐方式 默认自动// lineHeight:56 //行高 rich中如果没有设置lineHeight,则会取父层级的lineHeighttextBorderColor: 'pink', //文字本身的描边颜色 transparent（透明的）textBorderWidth: 1, //文字本身的描边宽度textShadowColor: 'orange', //文字本身的阴影颜色 transparent（透明的）textShadowBlur: 1, //文字本身的阴影长度textShadowOffsetX: 0, //文字本身的阴影X偏移textShadowOffsetY: 0 //文字本身的阴影Y偏移},subtext: '环形图的副标题',sublink: 'https://www.baidu.com/', //副标题的文本超链接subtextStyle: {color: 'orange', //副标题文字的颜色fontStyle: 'normal', //副标题文字字体的风格fontWeight: 'normal', //副标题文字字体的粗细},triggerEvent: 'false', //是否触发事件padding: 5, //标题内边距 单位为PX，默认各方向内边距为5 上右下左itemGap: 10, //主副标题之间的间距right: 20, //grid 组件离容器右侧的距离},tooltip: {trigger: 'item',formatter: "{a}{b}:{c}({d}%)" //a 系列名 b 数据名 c 数据值 d 百分比},toolbox: {show: true,feature: { //各工具配置项saveAsImage: {},dataView: { //数据视图readOnly: false},restore: {},magicType: { //动态类型切换type: ['line', 'bar']},}},legend: {type: 'plain', //plain 普通图例 scroll 可滚动翻页的图例。当图例数量较多是可以使用show: 'false',width: 'auto', //图例组件的宽度。默认自适应height: 'auto', //图例组件的高度。默认自适应orient: 'vertical', //图例列表的布局朝向 horizontal（水平）vertical（垂直）padding: 5, //图例内边距itemGap: 30, //图例每项之间的间隔 横向布局时为水平间隔，纵向布局时为纵向间隔。itemWidth: 35, //图例标记的图形宽度itemHeight: 24, //图例标记的图形高度selectedMode: true, //图例选择的模式，控制是否可以通过点击图例改变系列的显示状态 ，默认开启true false关闭inactiveColor: 'pink', //图例关闭时的颜色，默认#ccc灰色x: 'left', //相对于容器的屏幕X坐标data: this.demo2List, //图例的数据数组textStyle: { //图例的公共文本样式color: 'blue',fontStyle: 'italic' //文字字体风格 默认normal},borderColor: 'green', //图例的边框颜色borderWidth: 1, //图例的边框宽度borderRadius: 5, //圆角半径 borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）},series: [{name: '访问来源', //系列名称 用于tooltip的显示type: 'pie', //图类型radius: ['50%', '70%'],avoidLabelOverlap: false, //是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。label: {normal: {show: false,position: 'center', //outside(扇区外侧) inside/inner(扇区内部) center(饼图中心位置)},emphasis: {show: true,textStyle: {fontSize: '30',fontWeight: 'bold'}}},// labelLine: { //lable position设置为outside时才会显示视觉引导线// length: 30, //视觉引导线第一段长度// length2:18, //视觉引导线第二段长度// // smooth:'false'//是否平滑视觉引导线，，默认平滑// },itemStyle: {borderColor: 'red', //图形的描边颜色},data: this.demo2ConList,}],markPoint: {animation: 'true',animationThreshold: 2000}}demo.setOption(option)} }js中写入相关属性后，需要页面自调这个函数，在mounted里面。 效果如图：
博主已将自己练习的各种demo，上传到了git，地址：https://github.com/wangxianping321/vue-echarts，感兴趣的朋友可以看一下，顺便点个小星星
该文为博主原创，未经允许禁止转载，转载请著名出处 |
【本文地址】
今日新闻 |
推荐新闻 |