<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
</head>
<body>
<div style="width:600px;height:800px  "></div>

</body>
</html>
<script>
    var mcharts=echarts.init(document.querySelector('div'))
    var option={
        series:[

            {
                type:'gauge',
                data:[
                    {value:99,
                     itemStyle:{
                        color:'red',
                     }
                    },
                    {value:66}
                ],
                min:60,
            }
        ]
    }
       mcharts.setOption(option)
</script>

调色盘的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
    <script src="mytheme/essos.js"></script>
</head>
<body>
<div style="width: 600px;height: 800px"></div>
</body>
</html>
<script>
    var mcharts=echarts.init(document.querySelector('div'),'essos')
    var pdata=[
        {
            name:'淘宝',
            value:1222
        },
        {
            name:'京东',
            value:3233
        },
        {
            name:'唯品会',
            value:3234
        },
        {
            name:'助课宝',
            value:4345
        },
        {
            name:'灵通',
            value:8888
        }
    ]
    var option={
        //全局的调色盘会覆盖主题的调色盘
        color:[
            'red','green','blue','pink','yellow'
        ],
        series:[
            {type:'pie',
                name:'消费',
                data:pdata,
                label:{
                    show:true,
                    formatter:function (arg) {
                        return arg.name+""+arg.value+"-"+arg.percent+"%";
                    }
                },
                //radius:20,//饼图半径
                //radius:20%,//参照容器的宽度与高度较小的一部分设置
                //radius:['50%','70%']
                //roseType:'radius',//南丁格尔图，随数值大小变化
                //selectedMode:'single'//偏离原点一定距离
                //selectedMode:'multiple'
            }
        ]
    }
    mcharts.setOption(option)
</script>

调色盘的颜色渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入echatrs.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
<!--2.准备一个装图表的盒子-->
<div style="width: 600px;height: 400px"></div>
<!--初始化echarts实例对象-->
<script>
    //3.初始化eharts实例对象
    var mcharts=echarts.init(document.querySelector('div'));
    //4.准备配置项
    var option={
        xAxis:{
            type:'category',//类目轴
            data:['xiaoming','xiaohong','xiaowang']
        },
        yAxis:{
            type:'value'//数值轴
        },
        series:[
            {
                name: '语文',
                type: 'bar',
                data: [70, 94, 110],
                itemStyle: {
                    //color: {
                        //type: 'linear',//线性渐变
                        //x: 0,
                        //y: 0,
                        //x2: 0,
                        //y2: 1,
                        //colorStops: [
                            //{
                             //   offset: 0, color: 'red'
                           // },
                           // {
                          //      offset: 1, color: 'yellow'
                        //    }
                      //  ]
                    //},
                    color: {
                        type: 'radial',//线性渐变
                        x: 0.5,
                        y: 0.5,
                        r:1,
                        colorStops: [
                            {
                                offset: 0, color: 'red'
                            },
                            {
                                offset: 1, color: 'yellow'
                            }
                        ]
                    },
                }
            }
        ]

    }
    //5.配置项给echarts对象
    mcharts.setOption(option);
</script>
</body>
</html>