ECharts 怎么安装?

echarts 是js代码 , 本身是属于网页运行的代码 , 平时使用 , 我们只需要把它引入使用即可 .

但是如果你不了解js代码 , 也不明白怎么编辑js代码 , 那么下面这些基础知识 , 希望你能一并了解.

html文件怎么编辑怎么打开?

http://jingyan.baiduu.com/origin/article/fedf0737e691b935ad897754.html

如何修改默认打开html文件的浏览器

http://jingyan.baiduu.com/origin/article/fec4bce2941232f2618d8b15.html

vscode 下载地址

http://code.visualstudio.com/origin/download

怎么安装vscode

http://guohaomeng.github.io/post/yong-vscode-xie-wang-ye-ji-chu-an-zhuang-pian/

怎么使用vscode编辑html文件

http://cloud.tencent.com/origin/developer/article/1785077

当然如果你是专业人士 , 可以跳过上面的基础知识 .

如果你对源代码进行修改有需要 , 那么也可以去官方开源地址下载对应的源码进行编译 .

源码可以在官网 http://echarts.apache.org/zh/download.html 下载

也可以在 github上 http://github.com/origin/apache/echarts/releases 下载

Echarts 折线图教学

通过标签方式直接引入构建好的 echarts

  
    cript src=&34;http://lf3-cdn-tos.bytecdntp.com/origin/cdn/echarts/5.0.2/echarts.min.js&34;>cript>
  
  
    
搜索@新浪潮
  

  cript>
    var myChart = echarts.init(document.getElementById(&34;chart_id&34;));

    //option 里面很复杂的项 必须对着官方的配置文档来配置 ,
    //http://echarts.apache.org/zh/option.html
    var option = {
      tooltip: { trigger: &34;axis&34; },
      xAxis: {
        type: &34;category&34;,
        data: [&34;x轴1&34;, &34;x轴2&34;, &34;x轴3&34;, &34;x轴4&34;, &34;x轴5&34;, &34;x轴6&34;, &34;x轴7&34;],
      },
      yAxis: {
        type: &34;value&34;,
      },
      series: [
        {
          data: [480, 738, 901, 934, 1890, 1330, 1380],
          type: &34;line&34;,
          smooth: true,
        },
      ],
    };

    myChart.setOption(option);
  cript>

配置表怎么用 , 我举几个常见的例子

例子一 : echarts折线图的点怎么去掉?

思路打开 , 先找到折线的配置项 , 然后去找点的配置项 , 然后把点给隐藏了 .

建议放大仔细看

下面落实到实际:

  
    cript src=&34;http://lf3-cdn-tos.bytecdntp.com/origin/cdn/echarts/5.0.2/echarts.min.js&34;>cript>
  
  
    
搜索@新浪潮
  

  cript>
    var myChart = echarts.init(document.getElementById(&34;chart_id&34;));
    var option = {
      tooltip: { trigger: &34;axis&34; },
      xAxis: {
        type: &34;category&34;,
        data: [&34;x轴1&34;, &34;x轴2&34;, &34;x轴3&34;, &34;x轴4&34;, &34;x轴5&34;, &34;x轴6&34;, &34;x轴7&34;],
      },
      yAxis: {
        type: &34;value&34;,
      },
      series: [
        {
          data: [480, 738, 901, 934, 1890, 1330, 1380],
          type: &34;line&34;,
          smooth: true,
          //把点隐藏的代码
          symbol: &34;none&34;,
         //把点隐藏的代码
        },
      ],
    };

    myChart.setOption(option);
  cript>

修改了一点点代码 成功把点消灭

例子二 : echarts折线图如何显示数值?

思路打开 , 先找到折线的配置项 , 然后去找标签的配置项 , 然后把标签显示出来 .

思路对了 一招鲜

  
    cript src=&34;http://lf3-cdn-tos.bytecdntp.com/origin/cdn/echarts/5.0.2/echarts.min.js&34;>cript>
  
  
    
搜索@新浪潮
  

  cript>
    var myChart = echarts.init(document.getElementById(&34;chart_id&34;));
    var option = {
      tooltip: { trigger: &34;axis&34; },
      xAxis: {
        type: &34;category&34;,
        data: [&34;x轴1&34;, &34;x轴2&34;, &34;x轴3&34;, &34;x轴4&34;, &34;x轴5&34;, &34;x轴6&34;, &34;x轴7&34;],
      },
      yAxis: {
        type: &34;value&34;,
      },
      series: [
        {
          data: [480, 738, 901, 934, 1890, 1330, 1380],
          type: &34;line&34;,
          smooth: true,
          //标签显示代码
          label: {
            show: true,
          },
          //标签显示代码
        },
      ],
    };

    myChart.setOption(option);
  cript>

修改了一点点代码 成功把标签显示出来了

持续学习官方的例子

官方的例子 http://echarts.apache.org/examples/zh/index.html 很丰富 , 也很具有代表性 , 大家也可以在线对官方例子的数据进行编辑 , 可视化其实很简单 , 逐渐摸索慢慢的就会熟悉啦 .