vue使用echarts---曲线型/环型

1、安装

        使用命令  npm install echarts -S  安装echarts

2、引入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3、在使用echarts时，必须要在外围设置一个宽度，否则图会很小，高度可设可不设

4、在项目中规划处一块区域

<div id="barChartLeft" ref="barChartLeft" style="height:550px;width:100%;"></div>

5、在页面中引入echarts ，引入echarts有两种方式，一种是所有的模板都引入，一种是需要什么引入什么，很明显第二个方法明显会快一点

import * as echarts from 'echarts';

var echarts = require('echarts/lib/echarts');    //可以直接写到方法中
require('echarts/lib/chart/pie')        //饼状
require('echarts/lib/chart/bar')        //折线

一、曲线型

1、初始化图表，这块内容很简单，其中barOptions是通过js引入

let chartLeft = echarts.init(document.getElementById('barChartLeft'));
// 绘制基本图表
chartLeft.setOption(barOptions);

 2、js中内容为

export const barOptions = {
    title: { text: '' },
    backgroundColor: '#FBFBFB',
    tooltip: {
        trigger: 'axis',
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
}

到此一个简单的取消图表已经做好了

但是，我们在开发中，数据肯定不会是固定值，一定是动态变化的，因此，我们需要动态修改参数

我们可以将data中的参数置为空，也可以直接赋值

然后通过setOption的方式进行赋值操作

myChart.setOption({
    xAxis: {
        data: this.xData            //数组类型的值
    },
    series: [{
        data: this.seriesData        //同样也是数组类型的值
    }]
})

/**
 * 注：我们在赋值的时候，参数类型必须与option中定义类型相同
 */

3、如果需要修改鼠标悬停显示内容，我们可以在option中添加tooltip的formatter类型

 

二、环型

1、同样，首先我们需要初始化dom，并绘制配置好的图表

2、创建option

export const pieOptions = {
    tooltip: {
        trigger: 'item'
    },
    color: [],   //颜色也可动态变化
    legend: {
        show: false,
    },
    series: [{
            name: '测试',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,//是否默认显示中间文字  如果设置为true会有文字重叠的问题
                position: 'center',
                formatter: function (item) {
                    return '{d|' + item.value + '} \n {b|' + item.name + '} \n {a|(测试)} \n {c|}';    //其中，d，b，a，c分别对应的是下方的rich样式，item是显示的内容
                },  //显示圆环中间的文字和百分比
                rich: {
                    d: {
                        fontSize: 28,
                        lineHeight: 30,
                        fontWeight: "bold",
                        color: "#333333",
                        align: "center"
                    },
                    b: {
                        fontSize: 14,
                        color: "#666666",
                        align: "center"
                    },
                    a: {
                        fontSize: 14,
                        color: "gray",
                        align: "center",
                    },
                    c: {
                        backgroundColor: {
                            image: require('@/img/icon/exc_point.png'),   //引入icon/图片
                        },
                    }
                }
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '24',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: []
        }
    ]
}