zoukankan      html  css  js  c++  java
  • echart折线图系列一:折线图基本配置

    1. 引入echart插件
    2. 页面上准备一个容器:<div id="box" style="height:400px; 800px;padding: 20px"></div>
    3. 获取id,初始化:var myChart = echarts.init(document.getElementById("box"));
    4. 定义基本配置信息
       var option = {
               // 标题
               title: {
                   text: '',
                   subtext: ''
               },
               tooltip: {
                   trigger: 'axis',
         backgroundColor: 'rgba(36, 49, 67, 0.9)',

      }, //图例名 legend: { data:[''] }, grid: { left: '3%', //图表距边框的距离 right: '4%', bottom: '3%', containLabel: true }, //工具框,可以选择 toolbox: { feature: { saveAsImage: {} } }, //x轴信息样式 xAxis: { type: 'category', boundaryGap: false, data: [''], //坐标轴颜色 axisLine:{ lineStyle:{ color:'red' } }, //x轴文字旋转 axisLabel:{ rotate:30, interval:0 }, }, yAxis : [ { type : 'value', axisLabel : { formatter: '{value} 人' } } ], series: [ //虚线 { name:'', type:'line', symbolSize:4, //拐点圆的大小 color:['red'], //折线条的颜色 data:[], smooth:false, //关键点,为true是不支持虚线的,实线就用true itemStyle:{ normal:{ lineStyle:{ 2, type:'dotted' //'dotted'虚线 'solid'实线 } } } }, //实线 { name:'', type:'line', symbol:'circle', symbolSize:4, itemStyle:{ normal:{ color:'red', borderColor:'red' //拐点边框颜色 } }, data:[] } ] };

  • 相关阅读:
    防止IE缓存jquery ajax 内容
    MyBatis中主要类的生命周期和应用范围
    MyBatis学习练习
    MySql 日期格式化函数date_format()
    getFields()和getDeclaredFields()
    Java final修饰形参
    随笔
    Java SSH远程执行Shell脚本实现(转)
    jQuery 属性操作
    [git]解决:git config --global push.default matching
  • 原文地址:https://www.cnblogs.com/juicy-initial/p/9259262.html
Copyright © 2011-2022 走看看