echarts柱形图，仪表盘，饼图、环形图的样式配置

本文链接：https://blog.csdn.net/qq_39009348/article/details/86630626

一、vue下安装：

npm install echarts --save

局部引入：import echarts from 'echarts'

创建echarts对象：var myChart = echarts.init(document.getElementById('right_piebox')) 注意：装图表的盒子必须设置宽高

设置option，：myChart.setOption(option)

二、图解图标区域

三、环形图：

var option = {
        color: ['#1AFFFD', '#FEE581', '#06B8F8', '#FF5C58', '#AD5FF'], // 设置环形图各个区块的颜色
        // 点击每块区域的弹出层显示
        tooltip: {
          trigger: 'item', // 标题
          formatter: '{a} <br/>{b}: {c} ({d}%)' // 数据的显示方式
        },
        // 设置环形图项
        legend: {
          orient: 'vertical', // 图项的显示方式，垂直显示
          x: 'left', // 靠左显示，不写此项默认居中显示
          textStyle: {
            color: '#fff' // 图项字体颜色
          },
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] // 图项名称
        },
        // 配置环形图的显示与数据
        series: [
          {
            name: '访问来源', // 弹出层图表名称
            type: 'pie', // 饼图
            radius: ['40%', '50%'], // 40%内环圆心大小，若为0则为饼图，50%：外环圆心大小
            avoidLabelOverlap: false, // 是否启用防止标签重叠策略，默认开启，false则都居中显示，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
            label: {
              normal: {
                show: false, // 标签不显示，鼠标滑过才显示
                position: 'center' // 高亮时标签显示在中间，不写默认显示侧边
              },
              // 高亮图区的标签样式
              emphasis: {
                show: true,
                // 修改环形中间字体样式
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold',
                  color: '#fff'
                }
              }
            },
            // 标签的引导线
            labelLine: {
              normal: {
                show: false // 标签的引导线不显示，若显示还可设置线的样式，参考echart文档
              }
            },
            // 展示数据
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      }

四、柱状图

var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // 网格相关配置
        grid: {
          height: '120' 
        },
        color: ['#1AFFFD', '#FFCB89'], // 修改图形颜色
        // 工具栏
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false }, // 数据视图
            magicType: { show: true, type: ['line', 'bar'] }, // 图形切换
            restore: { show: true }, // 还原
            saveAsImage: { show: true } // 保存图片
          }
        },
        // 图项设置
        legend: {
          data: ['蒸发量', '降水量', '平均温度'],
          textStyle: { // 图列内容样式
            color: '#fff' // 字体颜色
          }
        },
        // x轴设置
        xAxis: [
          {
            type: 'category', // x轴类型，类目轴，value：数值轴，展示连续数据 time：时间轴
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            nameTextStyle: { // 坐标轴名称样式
              color: '#fff',
              padding: [5, 0, 0, -5]
            },
            nameGap: 15, // 坐标轴名称与轴线之间的距离
            axisLine: { // 坐标轴 轴线
              show: true, // 是否显示
              symbol: ['none', 'arrow'], // 是否显示轴线箭头
              symbolSize: [8, 8], // 箭头大小
              symbolOffset: [0, 7], // 箭头位置
              // ------   线 ---------
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: { // 坐标轴标签
              show: true, // 是否显示
              inside: false, // 是否朝内
              rotate: 0, // 旋转角度
              margin: 5, // 刻度标签与轴线之间的距离
              color: '#fff' // 默认取轴线的颜色
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        // y坐标相关
        yAxis: [
          {
            type: 'value',
            name: '水量',
            min: 0, // y坐标刻度最小值
            max: 250, // y坐标刻度最大值
            interval: 50, // 强制设置坐标轴分割间隔为50
            axisLine: { // 坐标轴 轴线
              show: true, // 是否显示
              //  -----   箭头 -----
              symbol: ['none', 'arrow'], // 是否显示轴线箭头
              symbolSize: [8, 8], // 箭头大小
              symbolOffset: [0, 7], // 箭头位置
              // ----- y轴线样式 -------
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: { // 坐标轴的标签
              formatter: '{value} ml', // 显示模板
              show: true, // 是否显示
              inside: false, // 是否朝内
              rotate: 0, // 旋转角度
              margin: 8, // 刻度标签与轴线之间的距离
              color: '#fff' // 默认轴线的颜色
            }
          },
          {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLine: { // 坐标轴 轴线
              show: true, // 是否显示
              //  -----   箭头 -----
              symbol: ['none', 'arrow'], // 是否显示轴线箭头
              symbolSize: [8, 8], // 箭头大小
              symbolOffset: [0, 7], // 箭头位置
              // ----- 线 -------
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: { // 坐标轴的标签
              formatter: '{value} °C',
              show: true, // 是否显示
              inside: false, // 是否朝内
              rotate: 0, // 旋转角度
              margin: 8, // 刻度标签与轴线之间的距离
              color: '#fff' // 默认轴线的颜色
            }
          }
        ],
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
            name: '蒸发量',
            type: 'bar', // 柱状图
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '平均温度',
            type: 'line', // 折线
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      }

展示：

五、仪表盘

var option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%' // 弹出层显示格式
        },
        // 工具栏
        toolbox: {
          feature: {
            restore: {}, // 还原
            saveAsImage: {} // 保存图片
          },
          right: '20'
        },
        // 图表整体相关配置
        series: [
          {
            name: '业务指标',
            type: 'gauge', // 类型：仪表盘
            startAngle: 180, // 开始角度 左侧角度
            endAngle: 0, // 结束角度 右侧
            center: ['50%', '80%'], // 默认全局居中
            radius: '130%', // 圆大小
            detail: { formatter: '{value}%' },
            axisLine: { // 设置仪表盘颜色范围
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [25 / 100, '#2E7CFF'], // 0-25为改颜色样式
                  [70 / 100, '#1AFFFD'], // 25-70为改颜色样式
                  [100, '#FFCB89'] // 75-100为该颜色样式
                ],
                width: 10, // 半径（环的宽度）
                shadowColor: '#fff', // 默认透明
                shadowBlur: 1
              }
            },
            title: {
              textStyle: {
                color: '#fff' // 标题样式（完成率）
              }
            },
            data: [{ value: 50, name: '完成率' }]
          }
        ]
      }
      setInterval(function() {
        // 实时改变data的值
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
        my_barChart.setOption(option, true)
      }, 1000)

效果图：

六、折线柱状混合图

var option = {
        // 提示框组件
        tooltip: {
          trigger: 'axis', // 触发类型：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          // 坐标轴指示器配置项
          axisPointer: {
            type: 'cross' // 类型：十字架指示器
          }
        },
        // 工具栏
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {} // 保存图片
          }
        },
        color: ['#1AFFFD'], // 柱形图颜色
        // x轴配置
        xAxis: {
          type: 'category', // 类型：类目轴
          boundaryGap: false, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样,设置为true则在item则在刻度之间显示
          nameTextStyle: { // 坐标轴名称样式
            color: '#fff',
            padding: [5, 0, 0, -5]
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          axisLine: { // 坐标轴 轴线
            show: true, // 是否显示
            symbol: ['none', 'arrow'], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置
            // ------   线 ---------
            lineStyle: {
              color: '#fff',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: { // 坐标轴标签
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 5, // 刻度标签与轴线之间的距离
            color: '#fff' // 默认取轴线的颜色
          },
          data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
        },
        // y轴配置
        yAxis: {
          type: 'value',
          axisPointer: {
            snap: true // 坐标轴指示器是否自动吸附到点上。默认自动判断。
          },
          axisLine: { // 坐标轴 轴线
            show: true, // 是否显示
            //  -----   箭头 -----
            symbol: ['none', 'arrow'], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置
            // ----- 线 -------
            lineStyle: {
              color: '#fff',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: { // 坐标轴的标签
            formatter: '{value}',
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 8, // 刻度标签与轴线之间的距离
            color: '#fff' // 默认轴线的颜色
          }
        },
        // 是视觉映射组件，分段折线
        visualMap: {
          show: false,
          dimension: 0, // 指定用数据的『哪个维度』，映射到视觉元素上。数组的第0项
          pieces: [{ // 分段配置可以使用 lt（小于，little than），gt（大于，greater than），
          // lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals）来表达边界：
            lte: 6,
            color: '#1AFFFD'
          }, {
            gt: 6,
            lte: 8,
            color: 'orange'
          }, {
            gt: 8,
            lte: 14,
            color: '#1AFFFD'
          }, {
            gt: 14,
            lte: 17,
            color: 'orange'
          }, {
            gt: 17,
            color: '#1AFFFD'
          }]
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
            name: '用电量',
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
            // 图表标域，常用于标记图表中某个范围的数据
            markArea: {
              data: [[{
                name: '早高峰',
                xAxis: '07:30'
              }, {
                xAxis: '10:00'
              }], [{
                name: '晚高峰',
                xAxis: '17:30'
              }, {
                xAxis: '21:15'
              }]]
            }
          }
        ]
      }

效果图：