ECharts常用常用图表样式

ECharts 饼图 默认高亮

    var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ["#3BCED0", "#37D0B8"],
        legend: {
          show: false, // 图例是否显示
          orient: "horizontal",
          left: "center",
          bottom: "0",
          icon: "circle",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 60
                // name: "直接访问"
              },
              {
                value: 40
                // name: "联盟广告"
              }
            ],
            radius: "80%",
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,
            labelLine: {
              normal: {
                length: 45,
                length2: 45,
                show: false // 隐藏所有指示线
              }
            }
          }
        ]
      };

      myChart.setOption(option);
      myChart.dispatchAction({
        type: "highlight",
        dataIndex: 1
      });

      // 监听鼠标滑入事件
      myChart.on("mouseover", e => {
        // 鼠标滑入取消整个系列高亮
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: e.seriesIndex
        });
        // 然后高亮鼠标悬停的那块
        myChart.dispatchAction({
          type: "highlight",
          dataIndex: e.dataIndex
        });
      });

      // 监听鼠标滑出事件
      myChart.on("mouseout", e => {
        // 鼠标滑出取消整个系列所有高亮
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: e.seriesIndex
        });
        // 然后高亮鼠标最后悬停的那块
        myChart.dispatchAction({
          type: "highlight",
          dataIndex: e.dataIndex
        });
      });

      option && myChart.setOption(option);

Echarts 环形图样式大全

legend: {
          // top: '15%',
          // bottom:'0',
          x: 'right',
          y: 'center',
          orient: 'vertical',
          align: 'left', //这个是可以左右调整的
          itemWidth: 9,
          itemHeight: 9,
          data: [{
            name: '体育',
            icon: 'circle'
          }, {
            name: '劳育',
            icon: 'circle'
          }, {
            name: '美育',
            icon: 'circle'
          }],
        },
        series: [{
          hoverAnimation: false, //鼠标悬浮是否有区域弹出动画，false:无  true:有
          name: 'Access From',
          type: 'pie',
          radius: ['55%', '85%'], // 这个属性修改圆环宽度
          center: ['35%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {},
          tooltip: {
            show: false //显示提示框
          },
          labelLine: {
            show: false
          },
          data: [{
              value: 1048,
              name: '体育'
            },
            {
              value: 735,
              name: '劳育'
            },
            {
              value: 580,
              name: '美育'
            }
          ]
        }],

ECharts 折线图样式大全

       var option = {
 
        backgroundColor: '#FFF0F5',
 
        title: {
          text: '折线图',
          subtext: '模拟数据',
          x: 'center'
        },
 
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'left',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'top',
          data: ['预期','实际','假设']
        },
 
        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          x: 0, //距离左边
          x2: 0, //距离右边
          y: 0, //距离上边
          y2: 0, //距离下边
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
            containLabel: true
        },
 
        // 提示框
        tooltip: {
          trigger: 'axis'
        },
 
        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },
 
        xAxis: {
          name: '周几',
          type: 'category',
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#912CEE'
            }
          },
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 30, // 旋转角度
            interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
            },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: false,
          axisLine: {
            show: false, //隐藏x轴
          },
          axisTick: {
            show: false, //隐藏刻度线
          },
          axisLabel: {
            show: false, //隐藏刻度值
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
 
        yAxis: {
          name: '数值',
          type: 'value',
          min:0, // 设置y轴刻度的最小值
          max:1800,  // 设置y轴刻度的最大值
          splitNumber:9,  // 设置y轴刻度间隔个数
           // 设置折线上圆点大小
          symbolSize: 8,
          axisTick: {
            show: false, //隐藏刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          axisLabel: {
            show: false, //隐藏刻度值
          },
          splitLine: {
            show: false, // 隐藏背景
          }
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#87CEFA',
               //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //       {
                        //         offset: 0,
                        //         color: "rgba(240, 147, 43,.7)"
                        //       },
                        //       {
                        //         offset: 0.34,
                        //         color: "rgba(255, 190, 118,.5)"
                        //       },
                        //       {
                        //         offset: 1,
                        //         color: "rgba(255, 190, 118,0)"
                        //       }
                        //     ])
            }
          },
        },
 
        series: [
          {
            name: '预期',
            data: [820, 932, 301, 1434, 1290, 1330, 1320],
            type: 'line',
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            symbol: 'none',
            // 设置折线弧度，取值：0-1之间
            smooth: 0.5,
          },
 
          {
            name: '实际',
            data: [620, 732, 941, 834, 1690, 1030, 920],
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:8,
            itemStyle:{
              normal:{
                // 拐点上显示数值
                label : {
                show: true
                },
                borderColor:'red',  // 拐点边框颜色
                lineStyle:{                 
                  width:5,  // 设置线宽
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            }
          },
 
          {
            name: '假设',
            data: [120, 232, 541, 134, 290, 130, 120],
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:10,
            // 设置拐点为实心圆
            symbol:'circle',            
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label : {
                  show: true
                },
                lineStyle:{
                  // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                  color: 'rgba(0,0,0,0)'
                }
              }
            }
          }
        ],
        
        color: ['#00EE00', '#FF9F7F','#FFD700']
      };

ECharts 柱状图样式大全

        // 柱状图
        bar() {
            let that = this;
            var chartDom = document.getElementById("main2");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    top: 20,
                    textStyle: {
                        color: "#fff"
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: "category",
                    data: ["公共管家", "生活管家", "教学管家"],
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                series: [
                    {
                        barWidth: 12,
                        name: "巡检数据",
                        type: "bar",
                        color: "#5087EC",
                        data: that.xj,
                        barGap: "20%",
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: "right", //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: "#5087EC",
                                        fontSize: 12
                                    }
                                }
                            }
                        }
                    },
                    {
                        barWidth: 12,
                        name: "报修数据",
                        type: "bar",
                        color: "#68BBC4",
                        barGap: "20%",

                        data: that.bx,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启数值显示
                                    position: "right", //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: "#68BBC4",
                                        fontSize: 12
                                    }
                                }
                            }
                        }
                    }
                ]
            };

            // 自适应
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });

            option && myChart.setOption(option);
        },