echarts配置项

这篇文章主要介绍了Vue中使用Echarts的方式,本文将具体属性介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

在veu中使用echarts，是需要命令行安装的

npm install echarts

在main.js中引入

import echarts from 'echarts

Vue.prototype.$echarts=echarts

此处以环形图为例

首先页面创建一个div，自己写一个样式

   <div id="demo" style="width: 500px;height: 300px;border: 1px solid black;"></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 YaHei
            fontSize: 16,   //主标题文字的字体大小
            align: 'left',   //文字水平对齐方式 默认自动
            verticalAlign: 'top',   //文字垂直对齐方式 默认自动
            // lineHeight:56     //行高 rich中如果没有设置lineHeight,则会取父层级的lineHeight
            textBorderColor: '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}<br/>{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，感兴趣的朋友可以看一下，顺便点个小星星

该文为博主原创，未经允许禁止转载，转载请著名出处