echarts折线图例子

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq719756146/article/details/88568022

例子

<template>
  <div class="content">
    <div ref="myChart" class="classChart"></div>
  </div>
</template>

<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import baseFunc from "@/serves/baseFunc";
export default {
  props: ["title", "data"],
  mounted() {
    this.Myecharts();
  },
  methods: {
    Myecharts() {
      // 基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.title,
          textStyle: {
            //标题内容的样式
            color: "#999", 
            fontWeight: "lighter", //可选normal(正常),bold(加粗),bolder(加粗),lighter(变细),100|200|300|400|500...
            fontSize: 16 //主题文字字体大小,默认为18px
          },
          left: "center"
        },
        tooltip: {},
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisLabel: {
            interval: 4,
            textStyle: {
              color: "#999"
            }
          },
          axisTick: {
            //x轴刻度线
            show: false
          },
          axisLine: {
            //x轴
            show: false
          }
        },
        yAxis: {
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#eee"],
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          axisLabel: {
            color: "#555",
            fontSize: 14,
            textStyle: {
              color: "#999"
            },
            formatter: function(value, index) {
              var value;
              if (value >= 1000) {
                value = value / 1000 + "k";
              } else if (value < 1000) {
                value = value;
              }
              return value;
            }
          }
        },
        series: [
          {
            type: "line",
            color: "#F21156",
            areaStyle: {
              color: "rgba(242,17,86,0.1)"
            },
            itemStyle: {
              normal: {
                color: "#F21156",
                borderColor: "#fff" //拐点边框颜色
              }
            },
            symbol: "circle",
            symbolSize:5,
            data: [
              25000,
              10000,
              16000,
              10000,
              10000,
              15000,
              10000,
              16000,
              10000,
              10000,
              20000,
              20000
            ]
          }
        ]
      });
    }
  }
};
</script>

<style lang='less' scoped>
.content {
  padding-top: 0.5rem;
}
.classChart {
  width: 100%;
  height: 5rem;
}
h4 {
  font-size: 0.24rem;
  color: #999;
}
</style>
Myecharts() {
      // 基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.title,
          textStyle: {
            //标题内容的样式
            color: "#999", //京东红
            fontWeight: "lighter", //可选normal(正常),bold(加粗),bolder(加粗),lighter(变细),100|200|300|400|500...
            fontSize: 16 //主题文字字体大小,默认为18px
          },
          left: "center"
        },
        tooltip: {},
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisLabel: {
            interval: 4,
            textStyle: {
              color: "#999"
            }
          },
          axisTick: {
            //x轴刻度线
            show: false
          },
          axisLine: {
            //x轴
            show: false
          }
        },
        yAxis: {
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#eee"],
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          axisLabel: {
            color: "#555",
            fontSize: 14,
            textStyle: {
              color: "#999"
            },
            formatter: function(value, index) {
              var value;
              if (value >= 1000) {
                value = value / 1000 + "k";
              } else if (value < 1000) {
                value = value;
              }
              return value;
            }
          }
        },
        series: [
          {
            type: "line",
            color: "#F21156",
            areaStyle: {
              color: "rgba(242,17,86,0.1)"
            },
            itemStyle: {
              normal: {
                color: "#F21156",
                borderColor: "#fff" //拐点边框颜色
              }
            },
            symbol: "circle",
            symbolSize:5,
            data: [
              25000,
              10000,
              16000,
              10000,
              10000,
              15000,
              10000,
              16000,
              10000,
              10000,
              20000,
              20000
            ]
          }
        ]
      });
    }
展开阅读全文

关于echarts折线图

01-23

最近在写一个关于折线图的问题,后台和前端写出来以后一直调用不到,找错误也没发现问题出在哪了,各位大大帮忙看一下rn这是action层调的servicern[code=java]rnpublic String showOracleLine(Oracle oracle)rn rn int length=oracleService.getOracleNumList().size();rn Map id = oracleService.getOracleInfo(oracle.getOracleId());rn Map state = oracleService.getOracleInfo(oracle.getState());rn System.out.println(oracle.getOracleId());rn JSONArray json = JSONArray.fromObject(id);rn json.add(state);rn json.add(length);rnrn result = json.toString();rn return SUCCESS;rn rn[/code]rnStruts配置文件rn[code=java]rnrn rn resultrn rn rn[/code]rn前端写了一个divrn[code=java]rn rn rn rn rn rn rn rn rn[/code]rnjsrn[code=javascript]rnrnfunction showLine() rn var action = "$pageContext.request.contextPath/json_oracle_showOracleLine.action";rn var loadAChart = echarts.init(document.getElementById("showLine"));rn var option = rn title : rn text : '数据库信息'rn ,rn // 鼠标悬停信息rn tooltip : rn trigger : 'axis'rn ,rn // 工具箱rn toolbox : rn left : 'right',rn restore : ,rn ,rn // 图例rn legend : rn data : [],rn textStyle : rn fontSize : 14,rn fontWeight : 'bolder',rn color : '#fff'rn rn ,rn // 直角坐标系内绘网格rn grid : rn containLabel : true,rn right : 20,rn left : 20rn ,rn xAxis : rn type : 'category',rn splitLine : rn show : falsern ,rn data : [],rn // 坐标轴轴线设置rn axisLine : rn lineStyle : rn color : 'white',rn type : 'solid',rn width : 1rn rn ,rn // 坐标轴刻度rn axisTick : rn show : true,rn interval : 'auto',rn length : 5,rn lineStyle : rn color : 'white',rn width : 2,rn rn ,rn ,rn yAxis : rn type : 'value',rn splitNumber : 2,rn // 坐标轴轴线设置rn axisLine : rn show : false,rn lineStyle : rn color : 'white',rn type : 'solid',rn width : 1rn rn ,rn // 坐标轴文本标签rn axisLabel : rn textStyle : rn color : "white",rn fontSize : 12rn rn ,rn ,rn// series : rn// type : 'line'rn// ,rn ;rn loadAChart.showLoading();rn loadAChart.setOption(option);rn loadAChart.resize();rn $.ajax(rn type: "POST",rn url: action,rn contentType: "application/x-www-form-urlencoded; charset=utf-8",rn data: $('#lineForm').serialize(),rn dataType : "json",rn success: function(data)rn var ret = eval('(' + data + ')');rn $("#showLine").show();rn var option = rn xAxis : rn type : 'category',rn data : ret.id,rn boundaryGap:falsern ,rn yAxis : rn type : 'category',rn data : ret.state,rn boundaryGap:falsern ,rn series : [rn rn name : '数据库信息',rn type : 'line',rn data : ret.data,rn smooth: true,rn lineStyle:rn normal:rn color:'#fb6f51'rn rn rn rn ]rn ;rn loadAChart.hideLoading();rn loadAChart.setOption(option);rn loadAChart.resize();rn rn )rnrn[/code] 论坛

没有更多推荐了,返回首页