Vue使用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 = {
         : {
          text: \"环形图demo\",
          show: true,   //是否显示组件标题 true显示，false隐藏
           : \'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: \'环形图的副标题\',
          su : \'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，感兴趣的朋友可以看一下，顺便点个小星星

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