在vue下echarts安装与使用

一、echarts安装与引用

1.使用npm安装

npm install echarts --save

2.main.js文件下添加

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在vue文件下编写

 <div id="charts-demo" class="echart"></div>

methods:{
		 drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("charts-demo"));
      // 绘制图表
      myChart.setOption({里面就可复制官方文档里的内容});
    },
}

 mounted() {
    this.drawLine();
  }

4.必须设置echarts的宽跟高，不然不显示

 .echart {
    width: 600px;
    height: 800px;
  }

二、echarts使用&修改参数

以圆环为例

首先贴出完整的代码：

series: [
          {
            type: "pie",
            clockWise: false,
            radius: [30, 37],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["15%", "50%"],
            data: [
              {
                value: 35,
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: "#3a7ad5",
                        align: "center",
                        fontSize: 13,
                        fontWeight: "bold"
                      }
                    },
                    formatter: function() {
                      return "95分";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                      color: "#fff"
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#03c7cf" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#004df4" // 100% 处的颜色
                        }
                      ],
                      globalCoord: false // 缺省为 false
                    },
                    shadowBlur: 0
                  }
                }
              },
              {
                value: 55,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#0069eb" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#004df4" // 100% 处的颜色
                        }
                      ],
                      globalCoord: false // 缺省为 false
                    }
                  },
                  emphasis: {
                    // color: "#014bf6"
                  }
                }
              },
              {
                value: 10,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#01184d"
                  },
                  emphasis: {
                    // color: "#014bf6"
                  }
                }
              }
            ]
          }
        ]

series: 决定图表类型的；
clockWise::饼图的扇区是否是顺时针排布。
radius: 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小。
itemStyle: 设置饼状图扇形区域样式
hoverAnimation: 鼠标放上去是否有动画效果
center： 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置。

data：
formatter： 饼图里中间的文字
position： 文字位置
textStyle: 文字样式设置
color: 设置饼图里渐变色的。